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

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>
input date sin estilos visualizado en distintos navegadores
El input date sin estilos se visualiza de distinta forma en distintos navegadores
Diseño deseable del input date
.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);}

Paso 2: Reset sobre nuestro componente

Icono del calendario

.form-date__input[type=”date”]::-webkit-calendar-picker-indicator {display: none;}
  • 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;}

Margenes irregulares.

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

Margenes y bordes irregulares.

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

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

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

--

--

--

accessibility web

Love podcasts or audiobooks? Learn on the go with our new app.

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
Francisco Marquez Duro

Francisco Marquez Duro

accessibility web

More from Medium

№1 — Coding Project Walk Through (Design Museum)

Flexbox or Grid

person sitting at computer

Change the Color of a Single Navigation Link in Squarespace

Accessibility Tips, Tricks, and Resources for Web Devs

This image shows a wheelchair user at a computer.