Existe alguma opção de estilo para o seletor de data HTML5?

Estou muito feliz com o seletor de data HTML5. É revigorante saber que o W3C está finalmente conseguindo um pouco da folga, então não precisamos ficar reinventando uma forma tão comum de entrada.

A ressalva é que não vejo ou prevejo muito na maneira de aplicar cores ao seletor em si, o que tornará o uso do seletor de data uma espécie de quebra de negócio na maioria dos sites. O <select>sofre de hacks generalizados de substituição de javascript pela simples razão de que as pessoas não conseguem torná-lo bonito. Estou curioso para saber se alguém sabe o que está acontecendo nas terras do W3C?

Isso está um pouco emparelhado com outra questão maior (caso você saiba a resposta): Vale a pena tentar me envolver com o W3C ou WHATWG para que algumas dessas coisas vejam a luz do dia? Qualquer tipo de percepção é útil.

Os oito pseudo-elementos a seguir são disponibilizados pelo WebKit para personalizar uma caixa de texto de entrada de data:

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

Portanto, se você pensou que a entrada de data poderia usar mais espaçamento e um esquema de cores ridículo, você poderia adicionar o seguinte:

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

Atualmente, não há um navegador cruzado e uma maneira livre de script de estilizar um selecionador de data nativo.

Quanto ao que está acontecendo dentro do WHATWG / W3C ... Se essa funcionalidade surgir, provavelmente estará sob o padrão CSS-UI ou algum padrão relacionado ao Shadow DOM . A página wiki do CSS4-UI lista algumas coisas relacionadas à aparência que foram retiradas do CSS3-UI, mas para ser honesto, não parece haver muito interesse no módulo CSS-UI.

Eu acho que sua melhor aposta para o desenvolvimento em vários navegadores agora é implementar controles bonitos com interface baseada em JavaScript e, em seguida, desabilitar a IU nativa do HTML5 e substituí-la. Acho que no futuro, talvez haja um estilo de controle nativo melhor, mas talvez o mais provável seja a capacidade de trocar um controle nativo por seu próprio "widget" Shadow DOM.

É irritante que isso não esteja disponível, e solicitar suporte padrão sempre vale a pena. Embora pareça que o líder do jQuery UI tentou e não teve sucesso .

Embora tudo isso seja muito desanimador, também vale a pena considerar as vantagens do seletor de data HTML5 e também por que os estilos personalizados são difíceis e talvez devam ser evitados. Em algumas plataformas, o selecionador de data parece extremamente diferente e eu pessoalmente não consigo pensar em nenhuma maneira genérica de estilizar o selecionador de data nativo.

encontrei isso no github do Zurb

Caso você queira fazer um estilo mais personalizado. Aqui está todo o CSS padrão para renderização do webkit dos componentes de data.

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

Usei uma combinação das soluções acima e algumas tentativas e erros para chegar a essa solução. Demorou muito tempo, então espero que isso possa ajudar alguém no futuro. Também percebi que a entrada do seletor de data não é de todo suportada pelo Safari ...

Estou usando componentes estilizados para renderizar uma entrada de selecionador de data transparente, conforme mostrado na imagem abaixo:

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

Você pode usar o seguinte CSS para definir o estilo do elemento de entrada.

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="" />

FYI, eu precisava atualizar a cor do ícone de calendário que não parecia possível com propriedades como color, fill, etc.

Acabei descobrindo que algumas filterpropriedades ajustarão o ícone, então embora eu não tenha conseguido descobrir como torná-lo de qualquer cor, felizmente tudo que eu precisava era torná-lo de forma que o ícone ficasse visível em um fundo escuro para que eu pudesse faça o seguinte:

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>

Espero que isso ajude algumas pessoas, pois na maior parte do tempo o cromo diz que isso é impossível.