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

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

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

Vamos a aplicarle el siguiente diseño:

Diseño deseable del input date

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

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.

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.

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.

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.

.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

input date final viendose igual en chrome, safari, opera, firefox

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.

--

--

accessibility web

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store