web-dev-qa-db-fra.com

Supprimer la flèche d'arrière-plan de la date dans Google Chrome v20

Depuis Google Chrome v20, un nouveau calendrier a été ajouté aux entrées de date. Le problème avec ceci est que j'utilise javascript pour créer mon propre calendrier et que j'ai déjà une icône dans la même position que la flèche chromée par défaut.

Je me demandais comment puis-je supprimer le fond de la flèche?

Image showing a dropdown with the arrow

html5google-chrome
26
Daniel Tavares

Autant que je sache, vous ne pouvez pas le désactiver pour le moment. Une discussion est en cours ici: https://plus.google.com/102860501900098846931/posts/hTcMLVNKnec

Ils ajouteront peut-être des sélecteurs -webkit pour contrôler le style.

Pour l'instant, vous devrez peut-être utiliser <input type="text"> à la place.

EDIT:

Selon réponse de Jeremy , il est maintenant possible de supprimer les boutons fléchés et de rotation. Des détails peuvent être trouvés sur webkit.org: Styling Form Controls - WebKit

Le CSS à cacher les contrôles est:

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

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

Cependant, cela ne fera que masquer et ne pas désactiver le calendrier natif! - vous pouvez toujours activer le calendrier en appuyant sur Alt+Down Arrow (au moins sous Windows).

Pour désactiver, vous devez ajouter un peu de JavaScript comme décrit sur la page webkit.org ci-dessus:

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

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

Vous pouvez le voir fonctionner dans this jsfiddle .

63
jfrej

À ce jour, webkit a introduit des contrôles pour gérer ceci:

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

Donc, pour ce problème particulier, ce serait:

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

ajouter à @jfrej: (je ne peux pas commenter pour le moment)

Pour supprimer tous les effets, le chrome s’applique à l’entréeVous devez également effacer le bouton "x" (effacer). :: - webkit-clear-button 

Pour empêcher l'affichage du texte par défaut . Ce qui n'est ni un espace réservé ni une valeur que vous pouvez utiliser :: - webkit-date-heure-edit-champs-wrapper. ne peut plus voir la valeur.

.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

Vous pouvez le mettre comme ça 

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);
}

en mettant l'attribut color dans l'opacité 0, vous ferez disparaître la flèche

1
user5681092

Je ne pense pas pouvoir pour le moment. Ils travaillent sur un concept appelé Shadow DOM qui vous permettra de manipuler et de styliser les modèles par défaut. Je crois qu'il est disponible dans Chrome Canary afin que vous puissiez essayer de l'utiliser.

1
Maurice