Cómo eliminar el estilo predeterminado del tipo de entrada fecha en html5

Cómo eliminar el estilo predeterminado del tipo de entrada fecha en HTML5 Aquí hay una introducción detallada a través de este artículo. La introducción específica es la siguiente.

2. Modifique el estilo del control de fecha y hora. Actualmente, existen los siguientes 9 pseudoelementos en WebKit que pueden cambiar la interfaz de usuario del control de fecha:

 ::-webkit-datetime-edit - controla el área de edición ::-webkit-datetime-edit-fields-wrapper - controla el área de año, mes y día ::-webkit-datetime-edit-text - controla el año, mes y día Una barra o guión entre ::-webkit-datetime-edit-month-field – controla el mes::-webkit-datetime-edit-day-field – Controlar el día específico::-webkit-datetime-edit-year-field – controlar el texto del año, como el espacio ocupado por las cuatro letras de 2017::-webkit-inner-spin-button – este es el control del pequeñas flechas hacia arriba y hacia abajo:: -webkit-calendar-picker-indicator: esto controla la flecha desplegable::-webkit-clear-button: esto controla el botón de borrar

Lo siguiente incluye pseudoelementos utilizados por fecha, fecha y hora, semana y hora:

 entrada::-webkit-datetime-edit{}entrada::-webkit-datetime-edit-fields-wrapper{}entrada::-webkit-datetime-edit-ampm-field{}entrada::-webkit-datetime-edit -campo-día{}entrada::-webkit-fechahora-editar-hora -campo{}entrada::-webkit-fecha-hora-editar-milisegundo-campo{}entrada::-webkit-fecha-hora-editar-minuto-campo{}entrada::-webkit-fecha-hora-editar-mes-campo{}entrada ::-webkit-datetime-edit-segundo-campo{}entrada: :-webkit-datetime-edit-week-field{}entrada::-webkit-datetime-edit-year-field{}entrada::-webkit-datetime-edit-ampm-field:focus{}entrada::-webkit -fechahora-editar-día-campo:enfoque{}entrada::-webkit-dateti me-edit-hour-field:focus{}entrada::-webkit-datetime-edit-millisegundo-field:focus{}entrada::-webkit-datetime-edit-minuto-field:focus{}entrada::-webkit -fechahora-editar-mes-campo:focus{}entrada::-webki t-datetime-edit-segundo-campo:focus{}entrada::-webkit-datetime-edit-week-field:focus{}entrada::-webkit-datetime-edit-year-field:focus{}entrada:: -webkit-datetime-edit-year-field[disabled]{}entrada::- webkit-datetime-edit-month-field[disabled]{}entrada::-webkit-datetime-edit-week-field[disabled]{}entrada::-webkit-datetime-edit-day-field[disabled]{} entrada::-webkit-fechahora-editar-campo-ampm[disab led]{}entrada::-webkit-datetime-edit-hour-field[disabled]{}entrada::-webkit-datetime-edit-millisegundo-field[disabled]{}entrada::-webkit-datetime-edit- campo de minutos[disabled]{}entrada::-webkit-datetim e-edit-segundo-campo[disabled]{}entrada::-webkit-datetime-edit-text{}entrada::-webkit-inner-spin-button{}entrada::-webkit-calendar-picker-indicator{ }entrada::-webkit-calendar-picker-indicator:hover{}

El pequeño triángulo que cambia la altura de la fila y la altura del tipo de fecha no se ajustará según el tamaño. Es realmente feo, así que decidí ocultarlo.

El siguiente CSS puede eliminar los triángulos superior e inferior de la fecha, pero conserva el triángulo pequeño cuyo tipo de entrada es número.

 entrada[tipo=fecha]::-webkit-inner-spin-button { visibilidad: oculto }

El cuadro de entrada cuyo tipo de entrada es fecha tiene los siguientes atributos, que se pueden ajustar según sus propias necesidades.

 ::-webkit-datetime-edit { relleno: 1px; fondo: url(../selection.gif }::-webkit-datetime-edit-fields-wrapper {color de fondo: #eee }::- webkit-datetime-edit-text {color: #4D90FE; relleno: 0 .3em}::-webkit-datetime-edit-year-field { color: púrpura }::-webkit-datetime-edit-month-field { color: azul }::-webkit-datetime-edit-day-field { color: verde }::-webkit-inner-spin- botón {visibilidad: oculto}::-webkit-calendar-picker-indicator {borde: 1px sólido #ccc;border-radius: 2px;box-shadow: inset 0 1px #fff, 0 1px #eee;color de fondo: #eee;imagen de fondo: -webkit-linear-gradient(arriba, #f0f0f0, #e6e6e6);color: #666;}

El anterior es el método que le presenta el editor para eliminar el estilo predeterminado de fecha de tipo de entrada en HTML5. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá. a tiempo. ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!