Existe-t-il des options de style pour le sélecteur de date HTML5 ?

Question

Existe-t-il des options de style pour le sélecteur de date HTML5 ?

Demandé el 18 de Février, 2013: Quand la question a-t-elle été
220715 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je suis vraiment enthousiasmé par le sélecteur de date HTML5.

L'inconvénient est que je ne vois pas ou ne prévois pas beaucoup de possibilités d'appliquer des couleurs au sélecteur lui-même, ce qui rendra l'utilisation du sélecteur de date impossible sur la plupart des sites. Le site <select> souffre d'un grand nombre de pirates qui remplacent JavaScript pour la simple raison que les gens ne peuvent pas le rendre joli.

Existe-t-il donc des options de style connues pour l'entrée HTML de type='date' ?

Demandé el 18 de Février, 2013 par Wray Bowling

Answer 1

5 Réponses

Answer 2

283voto

Anselm Urban Points 767

Les huit pseudo-éléments suivants sont mis à disposition par WebKit pour personnaliser la zone de texte d'une entrée de date :

::-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

Ainsi, si vous pensez que la saisie de la date pourrait bénéficier d'un espacement plus important et d'un schéma de couleurs ridicule, vous pouvez ajouter ce qui suit :

::-webkit-datetime-edit { padding: 1em; }
::-webkit-datetime-edit-fields-wrapper { background: silver; }
::-webkit-datetime-edit-text { color: red; padding: 0 0.3em; }
::-webkit-datetime-edit-month-field { color: blue; }
::-webkit-datetime-edit-day-field { color: green; }
::-webkit-datetime-edit-year-field { color: purple; }
::-webkit-inner-spin-button { display: none; }
::-webkit-calendar-picker-indicator { background: orange; }

<input type="date">

Screenshot

Répondu el 19 de Avril, 2013 par Anselm Urban (767 Points )

Answer 3

14voto

Braden Rockwell Napier Points 607

Pour information, j'avais besoin de mettre à jour la couleur de l'icône du calendrier, ce qui ne semblait pas possible avec des propriétés telles que color , fill etc.

J'ai fini par comprendre que certains filter les propriétés vont ajuster l'icône. Bien que je n'aie pas réussi à trouver comment la rendre de n'importe quelle couleur, heureusement, tout ce dont j'avais besoin était de faire en sorte que l'icône soit visible sur un fond sombre et j'ai pu faire ce qui suit :

body { background: black; }

input[type="date"] { 
  background: transparent;
  color: white;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(100%);
}

<body>
 <input type="date" />
</body>

J'espère que cela aidera certaines personnes car, pour la plupart, le chrome dit directement que c'est impossible.

Répondu el 4 de Juin, 2020 par Braden Rockwell Napier (607 Points )

Answer 4

13voto

Justin Moore Points 465

Trouvé ceci sur GitHub de la Fondation Zurb

Au cas où vous voudriez faire un peu plus de style personnalisé. Voici toutes les CSS par défaut pour le rendu webkit des composants de la date.

input[type="date"] {
     -webkit-align-items: center;
     display: -webkit-inline-flex;
     font-family: monospace;
     overflow: hidden;
     padding: 0;
     -webkit-padding-start: 1px;
}

input::-webkit-datetime-edit {
    -webkit-flex: 1;
    -webkit-user-modify: read-only !important;
    display: inline-block;
    min-width: 0;
    overflow: hidden;
}

input::-webkit-datetime-edit-fields-wrapper {
    -webkit-user-modify: read-only !important;
    display: inline-block;
    padding: 1px 0;
    white-space: pre;
}

Répondu el 24 de Janvier, 2014 par Justin Moore (465 Points )

Answer 5

7voto

Jean-Marie Dalmasso Points 277

J'ai utilisé une combinaison des solutions ci-dessus et quelques essais et erreurs pour arriver à cette solution.

J'utilise des composants stylisés pour rendre une entrée de sélecteur de date transparente comme le montre l'image ci-dessous :

const StyledInput = styled.input`
  appearance: none;
  box-sizing: border-box;
  border: 1px solid black;
  background: transparent;
  font-size: 1.5rem;
  padding: 8px;
  ::-webkit-datetime-edit-text { padding: 0 2rem; }
  ::-webkit-datetime-edit-month-field { text-transform: uppercase; }
  ::-webkit-datetime-edit-day-field { text-transform: uppercase; }
  ::-webkit-datetime-edit-year-field { text-transform: uppercase; }
  ::-webkit-inner-spin-button { display: none; }
  ::-webkit-calendar-picker-indicator { background: transparent;}
`

Répondu el 12 de Octobre, 2018 par Jean-Marie Dalmasso (277 Points )

Answer 6

3voto

vignesh waran Points 49

Vous pouvez utiliser les feuilles de style CSS suivantes pour donner un style à l'élément de saisie.

input[type="date"] {
  background-color: red;
  outline: none;
}

input[type="date"]::-webkit-clear-button {
  font-size: 18px;
  height: 30px;
  position: relative;
}

input[type="date"]::-webkit-inner-spin-button {
  height: 28px;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  font-size: 15px;
}

<input type="date" value="From" name="from" placeholder="From" required="" />

Répondu el 5 de Septembre, 2017 par vignesh waran (49 Points )

Existe-t-il des options de style pour le sélecteur de date HTML5 ?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Existe-t-il des options de style pour le sélecteur de date HTML5 ?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: