Como remover o estilo padrão do tipo de entrada data em HTML5

Como remover o estilo padrão do tipo de entrada data em HTML5. Aqui está uma introdução detalhada neste artigo.

2. Modifique o estilo do controle de data e hora Atualmente, existem os seguintes 9 pseudoelementos no WebKit que podem alterar a IU do controle de data:

 ::-webkit-datetime-edit - controla a área de edição ::-webkit-datetime-edit-fields-wrapper - controla a área do ano, mês e dia ::-webkit-datetime-edit-text - controla o ano, mês e dia Uma barra ou traço entre ::-webkit-datetime-edit-month-field – controla o mês::-webkit-datetime-edit-day-field – Controle o dia específico::-webkit-datetime-edit-year-field - controle o texto do ano, como a área ocupada pelas quatro letras de 2017::-webkit-inner-spin-button - este é o controle do pequenas setas para cima e para baixo:: -webkit-calendar-picker-indicator – Isso controla a seta suspensa::-webkit-clear-button – Isso controla o botão limpar

O seguinte inclui pseudoelementos usados ​​por data, data e hora, semana e hora:

 input::-webkit-datetime-edit{}input::-webkit-datetime-edit-fields-wrapper{}input::-webkit-datetime-edit-ampm-field{}input::-webkit-datetime-edit -dia-campo{}entrada::-webkit-datetime-edit-hour -field{}entrada::-webkit-datetime-edit-millisecond-field{}entrada::-webkit-datetime-edit-minuto-campo{}entrada::-webkit-datetime-edit-mês-campo{}entrada ::-webkit-datetime-edit-second-field{}entrada: :-webkit-datetime-edit-week-field{}input::-webkit-datetime-edit-year-field{}input::-webkit-datetime-edit-ampm-field:focus{}input::-webkit -datetime-edit-day-field:focus{}input::-webkit-dateti me-edit-hour-field:focus{}input::-webkit-datetime-edit-millisecond-field:focus{}input::-webkit-datetime-edit-minuto-field:focus{}input::-webkit -datetime-edit-month-field:focus{}input::-webki t-datetime-edit-second-field:focus{}input::-webkit-datetime-edit-week-field:focus{}input::-webkit-datetime-edit-year-field:focus{}input:: -webkit-datetime-edit-year-field[desativado]{}entrada::- webkit-datetime-edit-month-field[desativado]{}entrada::-webkit-datetime-edit-week-field[desativado]{}input::-webkit-datetime-edit-day-field[desativado]{} input::-webkit-datetime-edit-ampm-field[desab. led]{}input::-webkit-datetime-edit-hour-field[desativado]{}input::-webkit-datetime-edit-millisecond-field[desativado]{}input::-webkit-datetime-edit- campo de minuto[desativado]{}input::-webkit-datetim e-edit-second-field[desativado]{}input::-webkit-datetime-edit-text{}input::-webkit-inner-spin-button{}input::-webkit-calendar-picker-indicator{ }input::-webkit-calendar-picker-indicator:hover{}

O pequeno triângulo que altera a altura da linha e a altura do tipo de data não se ajusta de acordo com o tamanho. É muito feio, então resolvi ocultá-lo.

O CSS a seguir pode remover os triângulos superior e inferior da data, mas manter o pequeno triângulo cujo tipo de entrada é número.

 input[type=date]::-webkit-inner-spin-button {visibilidade: oculto};

A caixa de entrada cujo tipo de entrada é data possui os seguintes atributos, que podem ser ajustados de acordo com suas necessidades.

 ::-webkit-datetime-edit { preenchimento: 1px; fundo: url(../selection.gif }::-webkit-datetime-edit-fields-wrapper { cor de fundo: #eee }::- webkit-datetime-edit-text { cor: #4D90FE; preenchimento: 0 .3em }::-webkit-datetime-edit-year-field { cor: roxo }::-webkit-datetime-edit-month-field { cor: azul }::-webkit-datetime-edit-day-field { cor: verde }::-webkit-inner-spin- botão {visibilidade: oculto}::-webkit-calendar-picker-indicator {borda: 1px sólido #ccc;border-radius: 2px;box-shadow: inserção 0 1px #fff, 0 1px #eee;cor de fundo: #eee;imagem de fundo: -webkit-linear-gradient(top, #f0f0f0, #e6e6e6);cor: #666;}

O método acima é o método que o editor apresenta para remover o estilo padrão do tipo de entrada data em HTML5. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá. a tempo. Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!