MasterClassCSS — Estilar un input date sin morir en el intento… :)

¿Te ha pasado alguna vez que cuando intentas dar tus propios estilos a un input date no se ve igual en todos los navegadores?

Te haces las siguientes preguntas:
- Firefox se ve bien ¿Por qué no se ve bien en Chrome?
- Chrome desktop se ve bien… ¿Por qué no se ve bien en Chrome mobile?
- ¿Cómo lo hacen en stackoverflow?

A continuación te enseño como he conseguido que se vean correctamente los estilos de un input date en distintos navegadores.

La siguiente solución se ha probado en:
- Chrome.
- Firefox.
- Safari.
- Opera.
- Chrome mobile.
- Safari mobile.

Paso 1: Aplicar nuestro diseño en el componente

Tenemos el siguiente código:

<div class=”form-date”>
<label class=”form-date__label” for=”input-date”>Fecha de inicio</label>
<input class=”form-date__input” type=”date” id=”input-date” name=”input-date-start” value=”2018–07–22">
</div>

Es un html sencillo donde nos pinta un input date con su estructura básica. Si probamos este input en distintos navegadores nos sale con distintos formatos heredados de los navegadores:

El input date sin estilos se visualiza de distinta forma en distintos navegadores

Vamos a aplicarle el siguiente diseño:

Añadimos el CSS:

.form-date {
padding: 16px;
display: flex;
flex-direction: column;
}
.form-date__label {
font-family: “Helvetica”, arial, sans-serif;
font-size: 18px;
line-height: 24px;
padding-bottom: 8px;
}
.form-date__input[type=”date”] {
appearance: none;
color: #1D1D1D;
font-family: “Helvetica”, arial, sans-serif;
font-size: 18px;
border:1px solid #ECF0F1;
background:#ECF0F1;
padding: 4px;
display: inline-block;
visibility: visible;
width: 140px;
}
.form-date__input[type=”date”]:focus {
color: #495057;
background-color: #FFFFFF;
border-color: #80BDFF;
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

Aplicando los estilos anteriores vemos que los navegadores dan lo mejor de si con distintos formatos y estilos añadidos:

Las alturas de los inputs son distintos, los formatos son distintos, icono de borrar (Firefox), icono del calendario (Chrome), se aplica un border-radius…

Habría que aplicar un reset sobre nuestro input date

Paso 2: Reset sobre nuestro componente

Para ir reseteando los estilos del input date. Tenemos que aplicar los siguientes estilos:

Icono del calendario

.form-date__input[type=”date”]::-webkit-calendar-picker-indicator {
display: none;
}

El ::-webkit-calendar-picker-indicator hace referencia al icono del calendario.

Lo podemos quitar con el display: none;

OJO: En chrome de escritorio, si aplicamos el display:none, perderemos la posibilidad de que salga el calendario nativo. El calendario nativo sale solamente haciendo click al icono del calendario.

Si quieres seguir manteniendo el calendario nativo en chrome, recomiendo hacer lo siguiente:

• Aplicar al input un position: relative
• Cambiar el display:none del ::-webkit-calendar-picker-indicator y añadir el siguiente CSS

.form-date__input[type=”date”]::-webkit-calendar-picker-indicator {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
color: transparent;
background: 0 0;
margin: 0;
opacity: 0;
pointer-events: auto;
}

Lo que hago aquí es que el icono ocupe todo el ancho y el alto del input. Ahora da igual donde hagas click, se abrirá el calendario nativo siempre y sin visualizar el icono del calendario.

Margenes irregulares.

En el chrome de Android, la altura del input varia respecto a los demás.

Se debería de aplicar el siguiente estilo para resetear los margenes que añade:

&::-webkit-date-and-time-value {
margin: 0;
}

Margenes y bordes irregulares.

En el chrome de Android y en el safari de IOS añade margen interior:

Se debería de aplicar los siguientes estilos para resetear los margenes y el border radius:

.form-date__input[type=”date”] {
border: 0;
margin: 0;
border-radius: 0;
box-shadow: none;
-webkit-appearance: none;
}

Eliminar el botón de borrar en firefox.

He intentado quitar el botón borrar del input date en firefox con CSS pero no hay manera.

Pero si se aplica el atributo required al input, el aspa desaparece.
OJO: Aplicando required implica que el campo es obligatorio:

Flecha a la izquierda de la fecha.

Puede darse el caso que aunque se oculte el icono del calendario, pueda salir una flecha (desplegable) para poder abrir el calendario. En este caso hay que aplicar los siguientes estilos CSS:

.form-date__input[type=”date”]::-webkit-inner-spin-button,
.form-date__input[type=”date”]::-webkit-outer-spin-button,
.form-date__input[type=”date”]::-webkit-clear-button {
-webkit-appearance: none;
display: none;
}

Padding aplicado en dd/mm/yyyy

Aplicar la siguiente regla para quitar ese padding:1px

.form-date__input[type=”date”]::-webkit-datetime-edit-month-field { padding: 0; }
.form-date__input[type=”date”]::-webkit-datetime-edit-day-field { padding: 0; }
.form-date__input[type=”date”]::-webkit-datetime-edit-year-field { padding: 0; }

Padding aplicado en el wrapper de dd/mm/yyyy

.form-date__input[type=”date”]::-webkit-datetime-edit-fields-wrapper { padding: 0; }

Paso 3: Resultado final

Después de añadir todos los estilos sobre nuestro input. El resultado final es el siguiente:

Paso 4: Conclusión final

• El formateo de las fechas son distintas según cada navegador, el valor que se le pasa al input es el mismo: value=”2018–07–22"
• En Firefox el texto parece que no esta centrado verticalmente, esto puede deberse al line-height: 24px o que no renderiza de la misma forma la fuente.
• Se puede añadir muchos mas estilos a nuestro input, pero al añadir mas, puede que en otros navegadores no se vean bien y haya que tirar de los prefix
• No se puede estilar el calendario nativo. Los navegadores Chrome, Firefox y Opera aplican sus propios estilos. Safari no soporta el calendario. Safari y Chrome mobile usan el nativo de móvil. Unicamente se podrá estilar la carcasa del input.

Espero que te haya gustado la guía, te dejo el código de ejemplo y mi twitter. Agradezco feedback, cualquier duda o problema contactar conmigo.

• Código de ejemplo: https://codepen.io/francisco1990Web/pen/XWKrjQG
• Twitter: FranWeb1990
• Linkedin: https://www.linkedin.com/in/francisco-marquez-duro-3b1b0969/