Al crear estilos CSS para formularios HTML, los desarrolladores a menudo enfrentan la incapacidad de cambiar directamente la apariencia de las casillas de verificación y los botones de opción. Veamos cómo sortear esta limitación usando herramientas CSS3 y sin usar ningún código JavaScript.Por lo tanto, para empezar, agregue algunas casillas de verificación y cambios al formulario:/* */
<div>
<input type="checkbox" id="cb1"> <label for="cb1"> 1</label>
</div>
<div>
<input type="checkbox" id="cb2"> <label for="cb2"> 2</label>
</div>
<div>
<input type="checkbox" id="cb3"> <label for="cb3"> 3</label>
</div>
/* */
<div>
<input type="radio" name="rb" id="rb1" checked> <label for="rb1"> 1</label>
</div>
<div>
<input type="radio" name="rb" id="rb2"> <label for="rb2"> 2</label>
</div>
<div>
<input type="radio" name="rb" id="rb3"> <label for="rb3"> 3</label>
</div>
Mueva la visualización estándar de elementos más allá del alcance y agregue sangrías a las etiquetas adyacentes:input[type="checkbox"]:checked,
input[type="checkbox"]:not(:checked),
input[type="radio"]:checked,
input[type="radio"]:not(:checked)
{
position: absolute;
left: -9999px;
}
input[type="checkbox"]:checked + label,
input[type="checkbox"]:not(:checked) + label,
input[type="radio"]:checked + label,
input[type="radio"]:not(:checked) + label {
display: inline-block;
position: relative;
padding-left: 28px;
line-height: 20px;
cursor: pointer;
}
Antes de las etiquetas, agregue contenedores estilizados para nuestros elementos personalizados. Para las banderas, serán cuadrados con bordes ligeramente redondeados para belleza, y para interruptores, solo pequeños círculos:input[type="checkbox"]:checked + label:before,
input[type="checkbox"]:not(:checked) + label:before,
input[type="radio"]:checked + label:before,
input[type="radio"]:not(:checked) + label:before {
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 18px;
height: 18px;
border: 1px solid #dddddd;
background-color: #ffffff;
}
input[type="checkbox"]:checked + label:before,
input[type="checkbox"]:not(:checked) + label:before {
border-radius: 2px;
}
input[type="radio"]:checked + label:before,
input[type="radio"]:not(:checked) + label:before {
border-radius: 100%;
}
Ahora agregue indicadores de selección. Para las banderas, estos serán daws; para los interruptores, los círculos más pequeños llenos de color serán más pequeños que el contenedor en sí. Para un efecto más grande, también configuramos una pequeña animación:input[type="checkbox"]:checked + label:after,
input[type="checkbox"]:not(:checked) + label:after,
input[type="radio"]:checked + label:after,
input[type="radio"]:not(:checked) + label:after {
content: "";
position: absolute;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
input[type="checkbox"]:checked + label:after,
input[type="checkbox"]:not(:checked) + label:after {
left: 3px;
top: 4px;
width: 10px;
height: 5px;
border-radius: 1px;
border-left: 4px solid #e145a3;
border-bottom: 4px solid #e145a3;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
input[type="radio"]:checked + label:after,
input[type="radio"]:not(:checked) + label:after {
left: 5px;
top: 5px;
width: 10px;
height: 10px;
border-radius: 100%;
background-color: #e145a3;
}
Para representar la grajilla, rotamos un pequeño rectángulo, cuyos dos lados están coloreados, 45 grados en sentido antihorario.Tenga en cuenta que los selectores antes y después le permiten agregar contenido inmediatamente antes y después del contenido de la propia etiqueta. Dado que para las etiquetas establecemos el posicionamiento relativo (posición: relativo), podemos establecer el posicionamiento absoluto contextual para sus contenidos.Queda por ocultar los indicadores de selección cuando el elemento no está seleccionado y, en consecuencia, mostrarlos cuando el elemento está en el estado seleccionado:input[type="checkbox"]:not(:checked) + label:after,
input[type="radio"]:not(:checked) + label:after {
opacity: 0;
}
input[type="checkbox"]:checked + label:after,
input[type="radio"]:checked + label:after {
opacity: 1;
}
Agregamos que la solución descrita aquí funciona en todas las versiones modernas de los navegadores Chrome, Firefox, Safari, Opera y también, comenzando con la versión 9 y en Internet Explorer.Las definiciones CSS completas se pueden descargar aquí .