Desde que se inventó el CSS, los desarrolladores web de todo el mundo han deseado dar estilo a los controles que vienen incorporados en el navegador. Esto es sencillo en elementos simples como botones o inputs de texto, pero más complicado en elementos tipo select y range. En este tutorial, te mostraremos cómo hacerlo.
¿Por qué pseudo selectores?
No hay una manera estándar de personalizar la apariencia de los elementos que vienen incorporados en el navegador aún. Por ejemplo, el típico input search que muestra una pequeña x que puedes presionar para cancelar la búsqueda. Esto está implementado como un elemento separado internamente, pero no puedes llegar a hacer esto con CSS. Los desarrolladores de navegadores han tomado nota y han añadido selectores específicos del fabricante que podemos utilizar. Para la x, el selector a utilizar es input[type=search]::-webkit-search-cancel-button.
Puedes ver una lista de selectores a través de este enlace. Todos los navegadores proveen de ciertos selectores para personalizar los elementos incoporados del navegador, pero lo malo de todo esto es que cada navegador tiene sus propios selectores. Por suerte, en el futuro se convertirán en un estándar que traerán un poco de consistencia a todo este lío. Por ahora, tenemos que personalizar por cada navegador individualmente.
A continuación, te indicamos cómo dar estilo a esos elementos de formulario tan tediosos con pseudo selectores.
Checkboxes
No hay mucho que hacer si quieres personalizar checkboxes en CSS, aparte de darles una anchura y una altura. Pero Chrome y Safari soportan los pseudo elementos :before y :after en los inputs, con los que puedes divertirte un ratito. Observa que la marca de verificación está hecha enteramente con CSS e incluso está animada con un fundido en la transición.
Estableciendo el -webkit-appearance a none, evitamos que se aplique el estilo por defecto del navegador, lo que deja las puertas abiertas a nuestro CSS personalizado. También gracias a las unidades em, hemos escalado el checkbox con el tamaño de letra. Así que trata de aumentarlo.
CSS
body {
font: 13px sans-serif;
color:#444;
}
label {
padding: 10px;
display: block;
}
input[type=checkbox].styled {
-webkit-appearance: none;
height: 1em;
position: relative;
background-color: #276FF4;
width: 1em;
border-radius: 3px;
outline: none;
font-size: 16px;
/* try this: */
/* font-size: 36px; */
vertical-align: middle;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
input[type=checkbox].styled:active {
box-shadow: 0 0 0.8em rgba(0, 0, 0, 0.2) inset;
}
input[type=checkbox].styled:before,
input[type=checkbox].styled:after {
content: '';
background-color: inherit;
position: absolute;
transition: 0.1s background-color;
}
input[type=checkbox].styled:after {
width: 0.19em;
height: 0.65em;
-webkit-transform: rotate(36deg) translate(0.52em, -0.16em);
}
input[type=checkbox].styled:before {
width: 0.2em;
height: 0.4em;
-webkit-transform: rotate(-58deg) translate(-0.2em, 0.48em);
}
/* We use the checked selector to make the pseudo elements visible */
input[type=checkbox].styled:checked:after,
input[type=checkbox].styled:checked:before {
background-color: #fff;
}
HTML
<label>
<input type="checkbox" /> Regular Checkbox
</label>
<label>
<input type="checkbox" class="styled" />
Styled Checkbox
</label>
Radio Buttons
Podemos utilizar la misma técnica en los radio buttons. Aquí es más sencillo, ya que no es necesario hacer la marca de verificación con el CSS. Esto sólo funciona aún en Chrome y Safari. Otros navegadores mostrarán el radio button como siempre.
CSS
body {
font: 13px sans-serif;
color:#444;
}
label {
padding: 10px;
display: block;
}
input[type=radio].styled {
-webkit-appearance: none;
height: 1em;
position: relative;
background-color: #276FF4;
width: 1em;
border-radius: 50%;
outline: none;
font-size: 14px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
input[type=radio].styled:checked:before {
content: '';
height: 0.4em;
width: 0.4em;
background-color: #FFF;
position: absolute;
border-radius: 50%;
top: 0.3em;
left: 0.3em;
}
HTML
<label>
<input type="radio" name="test" /> Regular Radio
</label>
<label>
<input type="radio" class="styled" name="test" /> Styled Radio
</label>
Selects
Es muy difícil dar estilo a los elementos select con CSS. Incluso hoy en día se limita lo que podemos cambiar. Para personalizar la flecha hacia abajo, podemos utilizar una imagen de fondo y un poco de padding. Para la lista desplegable puedes especificar el tamaño de la fuente y un fondo para las opciones, pero no mucho más.
CSS
body {
font: 13px sans-serif;
color:#444;
}
label {
padding: 10px;
display: block;
}
select.styled {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
border: 1px solid #aaa;
padding: 2px 15px 2px 5px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAQAAACxSAwfAAAAUklEQVQY02P4z0AMRGZGMaShwCisyhITmb8huMzfEhOxKvuvsGAh208Ik+3ngoX/FbBbClcIUcSAw21QhXxfIIrwKAMpfNsEUYRXGVCEFc6CQwBqq4CCCtU4VgAAAABJRU5ErkJggg==), linear-gradient(#EDEDED, #EDEDED 38%, #DEDEDE);
background-position: right center;
background-repeat: no-repeat;
border-radius: 2px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
color: #333;
}
/* Required to disable the default IE styles */
select.styled::-ms-expand {
display: none;
}
select.styled:hover {
border-color: #909090;
}
/* You have limited control on the drop down list. Uncomment this: */
/* select.styled option{
background-color:green;
color:#fff;
font-size:20px;
} */
HTML
<label>
<select>
<option>Cheeze</option>
<option>Bacon</option>
<option>Pasta</option>
<option>Pizza</option>
<option>Ice Cream</option>
</select> Regular Select
</label>
<label>
<select class="styled">
<option>Cheeze</option>
<option>Bacon</option>
<option>Pasta</option>
<option>Pizza</option>
<option>Ice Cream</option>
</select> Styled Select
</label>
Elementos range
Los range son uno de los nuevos elementos de formulario aceptado por los navegadores. También, es uno de los más personalizables. Chrome, Safari y Firefox te proporciona un gran número de pseudo-elementos de CSS que puedes utilizar para dotar de un estilo específico a ciertas partes del elemento.
CSS
body {
font: 13px sans-serif;
color:#444;
}
label {
padding: 10px;
display: block;
}
input[type=range].styled {
-webkit-appearance: none;
outline: 0;
width: 300px;
transition: 0.2s;
}
/* Chrome */
input[type=range].styled::-webkit-slider-runnable-track {
height: 2px;
background: #9DA0A6;
border: none;
border-radius: 3px;
}
input[type=range].styled::-webkit-slider-thumb {
-webkit-appearance: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #FFF;
margin-top: -7px;
vertical-align: middle;
border: 5px solid #276FF4;
transition: 0.15s;
}
input[type=range].styled::-webkit-slider-thumb:active {
height: 20px;
width: 20px;
margin-top: -9px;
}
/* Firefox */
input[type=range].styled::-moz-range-track {
height: 2px;
background: #9DA0A6;
border: none;
border-radius: 3px;
}
input[type=range].styled::-moz-range-progress {
background: #276FF4;
}
input[type=range].styled::-moz-range-thumb {
height: 16px;
width: 16px;
border-radius: 50%;
background: #FFF;
margin-top: -7px;
vertical-align: middle;
border: 5px solid #276FF4;
transition: 0.15s;
box-sizing: border-box;
}
input[type=range].styled::-moz-range-thumb:active {
height: 20px;
width: 20px;
margin-top: -9px;
}
input[type=range].styled::-moz-focus-outer {
border: 0;
}
HTML
<label>
<input type="range" /> Regular Range
</label>
<label>
<input type="range" class="styled" /> Styled Range
</label>
Barras de progreso
Los elementos de progreso también te proporcionan un alto grado de personalización. Aunque para un elemento tan simple como este, podrías fácilmente anidar dos divs y hacer tu propia versión.
CSS
body {
font: 13px sans-serif;
color:#444;
}
label {
padding: 10px;
display: block;
}
progress.styled {
margin-top: 15px;
width: 200px;
height: 12px;
background-color: #ddd;
border: none;
}
/* Chrome */
progress.styled::-webkit-progress-bar {
background-color: #ddd;
}
progress.styled::-webkit-progress-value {
background-color: #266FF4;
}
/* Firefox */
progress.styled::-moz-progress-bar {
background-color: #266FF4;
}
HTML
<label>
<progress value="22" max="100"></progress> Regular Progress
</label>
<label>
<progress value="22" max="100" class="styled"></progress> Styled Progress
</label>
Está muy bien que por fin podamos modificar los controles incorporados del navegador, pero todavía queda un largo camino por recorrer en términos de estandarización. Google Chrome es líder claro en este tema, y si desarrollas aplicaciones de Chrome o extensiones puedes seguir adelante y utilizar todo lo que hemos mostrado en este artículo. Pero si quieres soporte multi-navegador, la mejor solución es seguir confiando en las librerías de JavaScript y en plugins de jQuery como Chosen.
Fuente: tutorialzine.com