web-dev-qa-db-fra.com

Comment se débarrasser des éléments x et des flèches haut / bas d'une date d'entrée?

enter image description here

La seule chose que j'ai besoin de montrer dans la boîte est le triangle orange, et je ne sais pas si j'ai besoin de CSS ou de quelque chose d'autre pour se débarrasser des deux éléments à gauche du triangle.

Existe-t-il un moyen de le faire? J'utilise simplement le type d'entrée date.

Violon: http://jsfiddle.net/5M2PD/1/

htmlcssinput
47
Paulius Dragunas

Utilisez la pseudo-classe -webkit-inner-spin-button pour lui donner un style spécifique aux navigateurs Webkit:

http://jsfiddle.net/5M2PD/2/

input[type=date]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    display: none;
}

Si vous souhaitez modifier le style de la flèche déroulante, utilisez la pseudo-classe -webkit-calendar-picker-indicator:

input[type=date]::-webkit-calendar-picker-indicator {
    -webkit-appearance: none;
    display: none;
}

Pour éliminer le bouton d'effacement, définissez l'entrée sur requis:

http://jsfiddle.net/5M2PD/3/

<input type="date" required="required" />
79
saluce

Pour supprimer le bouton d'effacement, utilisez ceci:

::-webkit-clear-button
{
    display: none; /* Hide the button */
    -webkit-appearance: none; /* turn off default browser styling */
}

En remarque, pour ce faire dans IE10 + ( source ), utilisez ceci:

::-ms-clear { }

Notez que celui-ci fonctionne sur <input type="text" />, puisque IE place désormais également un bouton d'effacement.

Pour styliser le reste du contrôle de date dans les navigateurs WebKit, je recommanderais de consulter ce lien . Pour résumer, vous pouvez jouer avec les pseudo-classes suivantes:

::-webkit-datetime-edit { }
::-webkit-datetime-edit-fields-wrapper { }
::-webkit-datetime-edit-text { }
::-webkit-datetime-edit-month-field { }
::-webkit-datetime-edit-day-field { }
::-webkit-datetime-edit-year-field { }
::-webkit-inner-spin-button { }
::-webkit-calendar-picker-indicator { }

Je recommande également fortement d'utiliser les éléments suivants afin de désactiver les styles de navigateur par défaut; J'ai trouvé cela particulièrement utile lorsque vous travaillez avec des navigateurs mobiles:

input[type="date"]
{
    -webkit-appearance: none;
}
39
vee