wake-up-neo.net

Hintergrundpfeil aus der Datumseingabe in Google Chrome v20 entfernen

Seit Google Chrome v20 wurde der Datumseingabe ein neuer Kalender hinzugefügt. Das Problem dabei ist, dass ich JavaScript zum Erstellen eines eigenen Kalenders verwende und ein Symbol bereits in derselben Position wie der Standard-Chrompfeil angezeigt wird.

Ich habe mich gefragt, wie ich den Pfeilhintergrund entfernen kann.

Image showing a dropdown with the arrow

26
Daniel Tavares

Soweit ich weiß, können Sie es im Moment nicht deaktivieren. Hier findet eine Diskussion statt: https://plus.google.com/102860501900098846931/posts/hTcMLVNKnec

Vielleicht fügen sie einige -webkit-Selektoren hinzu, um das Styling zu steuern.

Im Moment müssen Sie möglicherweise stattdessen <input type="text"> verwenden.

EDIT:

Gemäß Jeremys Antwort ist es jetzt möglich, den Pfeil und die Drehknöpfe zu entfernen. Details finden Sie auf webkit.org: Styling Form Controls - WebKit

Das CSS zum Ausblenden der Steuerelemente lautet:

<input type="date" class="unstyled" />

.unstyled::-webkit-inner-spin-button,
.unstyled::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

Dadurch wird jedoch nur der native Kalender ausgeblendet und nicht deaktiviert ! - Sie können den Kalender weiterhin aktivieren, indem Sie drücken Alt+Down Arrow (Zumindest unter Windows).

Zum Deaktivieren müssen Sie ein wenig JavaScript hinzufügen, wie auf der obigen webkit.org-Seite beschrieben:

<input type="date" id="dateInput" class="unstyled" />

dateInput.addEventListener('keydown', function(event) {
    if (event.keyIdentifier == "Down") {
        event.preventDefault()
    }
}, false);

Sie können sehen, dass es in dieser Jsfiddle funktioniert.

63
jfrej

Zum Zeitpunkt dieser Veröffentlichung hat webkit Steuerelemente eingeführt, um dies zu handhaben:

input[type="date"]::-webkit-calendar-picker-indicator{
    /* Your CSS here */
}
input[type="date"]::-webkit-inner-spin-button {
    /* Your CSS here */
}

Für diese spezielle Frage wäre es also:

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-inner-spin-button{
    display: none;
}
23
Jeremy Ricketts

hinzufügen zu @jfrej: (kann momentan nicht kommentieren)

Um alle Effekte abzubrechen, gilt Chrom für die Eingabe. Sie müssen auch die "x" (clear) -Taste löschen. :: - webkit-clear-button 

Um zu verhindern, dass der Standardtext angezeigt wird . Dies ist kein Platzhalter oder Wert. Sie können :: - webkit-datetime-edit-fields-wrapper kann den Wert nicht mehr sehen.

.unstyled::-webkit-clear-button {
    display: none;
    -webkit-appearance: none;
}



#dateInput:not([value])::-webkit-datetime-edit-fields-wrapper,
#dateInput[value=""]::-webkit-datetime-edit-fields-wrapper { 
    visibility: hidden;
}

http://fiddle.jshell.net/RgY3t/66/

12
Type-Style

Sie können es so sagen 

input[type="date"]::-webkit-calendar-picker-indicator{
       background-image: url(images/calendar-icon.png);
       background-position:center;
       background-size:20px 20px;
       background-repeat:no-repeat;
      color:rgba(204,204,204,0);
}

wenn Sie das Farbattribut in die Deckkraft 0 setzen, verschwindet der Pfeil

1
user5681092

Ich denke nicht im Moment. Sie arbeiten an einem Konzept namens Shadow DOM , mit dem Sie die Standardvorlagen bearbeiten und gestalten können. Ich glaube, dass es in Chrome Canary verfügbar ist, damit Sie es ausprobieren können.

1
Maurice