Todos estamos familiarizados con las casillas de verificación HTML (o checkboxes) y los botones de radio (o botones de opción). Lo más frustrante de ellos es que no hay forma de que cambiemos su apariencia. Se ven de manera diferente, dependiendo del sistema operativo y navegador utilizado, y no podemos diseñarlos con CSS.
Esto molesta a la mayoría de los diseñadores que desean hacer que esos elementos sean atractivos y que no arruinen todo el diseño. En este tutorial, te mostraremos cómo hacer que se vean realmente lindos con un truco sencillo.
Sé fuerte. Oculta tus casillas de verificación
Esto puede sonar contradictorio, pero para hacer que nuestras casillas de verificación y botones de radio se vean bien, tenemos que ocultarlos y olvidarnos de ellos. Sí, no hay necesidad de que se queden, así que, simplemente aplicamos una regla sencilla:
.section input[type="radio"], .section input[type="checkbox"]{ display: none; }
¿Qué vamos a hacer sin ellos? No te preocupes, construiremos nuevas casillas de verificación. Bueno, vamos a ver cómo hacer esto.
Botones de radio
Primero, aquí está nuestro mark-up:
<section id="first" class="section">
<div class="container">
<input type="radio" name="group1" id="radio-1">
<label for="radio-1"><span class="radio">Coffee</span></label>
</div>
<div class="container">
<input type="radio" name="group1" id="radio-2">
<label for="radio-2"><span class="radio">Tea</span></label>
</div>
<div class="container">
<input type="radio" name="group1" id="radio-3">
<label for="radio-3"><span class="radio">Cappuccino</span></label>
</div>
</section>
Tenemos una sección en la que vamos a colocar tres botones de radio. Nos centraremos en las casillas de verificación más tarde, como el principio es el mismo. Cada entrada está envuelta en un div con una clase container (contenedor). Además, cada entrada tiene una etiqueta (label) con un lapso (span).
¡Importante!
Como hemos ocultado las entradas de casilla de verificación y botón de radio, la única forma de acceder a ellas sería mediante el uso de una etiqueta. Para que funcione correctamente, la etiqueta debería contener el atributo for con el ID de la entrada correspondiente. Si una entrada tiene un ID radio-1, entonces, el atributo for también debería ser radio-1.
Es posible que te preguntes para qué envolvemos el texto dentro de cada etiqueta en un lapso:
<div class="container">
<input type="radio" name="group1" id="radio-1">
<label for="radio-1"><span class="radio">Coffee</span></label>
</div>
Dado que vamos a dar estilo a los botones de opción con pseudo-elementos ::before y ::after, necesitamos un elemento principal sobre la base del cual puedan colocarse. En este caso, será nuestra etiqueta:
.container label {
position: relative;
}
Aquí hay un conjunto de estilos que se comparte entre las casillas de verificación y los botones de opción:
.container span::before,
.container span::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
Las propiedades superiores e inferiores establecidas como cero y combinadas con margin: auto; permiten que nuestros elementos tengan una posición horizontal centrada.
Así es como se ve el resto de los estilos:
.container span.radio:hover {
cursor: pointer;
}
.container span.radio::before {
left: -52px;
width: 45px;
height: 25px;
background-color: #A8AAC1;
border-radius: 50px;
}
.container span.radio::after {
left: -49px;
width: 17px;
height: 17px;
border-radius: 10px;
background-color: #6C788A;
transition: left .25s, background-color .25s;
}
input[type="radio"]:checked + label span.radio::after {
left: -27px;
background-color: #EBFF43;
}
La parte más importante es el último conjunto de reglas que básicamente hace todo el truco. La pseudoclase :checked nos permite hacer cambios en los elementos cuando la entrada está marcada. Con el selector '+' podemos elegir el siguiente elemento "hermano" y dirigir nuestro span.radio, donde aplicamos nuevas reglas al pseudo elemento ::after. En este caso cambiamos su posición horizontal y el color.
Para que el cambio sea fluido, asignamos la transición de 0.25 segundos a la propiedad izquierda y al color de fondo. Ahora cuando hacemos clic en el botón de radio, el interruptor se mueve suavemente en lugar de saltar rápidamente.
Casillas de verificación
Si necesitas crear casillas de verificación personalizadas, el método es el mismo. Echa un vistazo a los estilos:
.container span.checkbox::before {
width: 27px;
height: 27px;
background-color: #fff;
left: -35px;
box-sizing: border-box;
border: 3px solid transparent;
transition: border-color .2s;
}
.container span.checkbox:hover::before {
border: 3px solid #F0FF76;
}
.container span.checkbox::after {
content: '\f00c';
font-family: 'FontAwesome';
left: -31px;
top: 2px;
color: transparent;
transition: color .2s;
}
input[type="checkbox"]:checked + label span.checkbox::after {
color: #62AFFF;
}
La única diferencia es que estamos usando un icono de la familia FontAwesome como nuestro pseudo elemento ::after. Por defecto es transparente, pero cuando la casilla de verificación está marcada, el icono se vuelve azul.
Aparte
Si quieres utilizar un icono de Font Awesome en tu pseudo elemento, necesitas incluir su código en la propiedad del contenido y especificar la propiedad de la familia de fuentes como FontAwesome. Por ejemplo:
{
content: '\f00c';
font-family: 'FontAwesome';
}
El código f00c se precede por una barra diagonal inversa que se utiliza para escapar del carácter de unicode. El unicode se puede encontrar en la página de tu icono elegido:
Resultado final
Eso es. Ya hemos creado unas casillas de verificación y botones de radio completamente funcionales y bonitos que puedes ajustar y usar en tus propios proyectos.
See
the Pen <a href="http://codepen.io/matthewcain/pen/KMgBxp/">Radio
buttons and check boxes 2</a> by Matthew Cain (<a
href="http://codepen.io/matthewcain">@matthewcain</a>) on <a
href="http://codepen.io">CodePen</a>.<br />
Fuente: "How To Make Stylish Checkboxes And Radio Buttons With CSS3" por Matthew Cain