Siempre es una buena opción usar casillas de verificación personalizadas en sus sitios web en lugar de las casillas de verificación HTML de la vieja escuela.
Este artículo proporciona una implementación paso a paso para el mismo.
Acercarse:
- Use la casilla de verificación de tipo de entrada y vincule una etiqueta con ella en HTML.
- Oculte la casilla de verificación de entrada y diseñe la etiqueta según sus requisitos.
- Cambie el estilo a medida que cambia el estado de la casilla de verificación.
Código HTML:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
label {
display:block;
border:solid 2px green;
width: 200px;
height:40px;
margin-top:10px;
color:green;
text-align:center;
line-height: 40px;
}
<!-- hide input -->
input[type=checkbox] {
display: none;
}
<!-- Add ✓ on checked before label -->
input:checked + label:before {
content: "✓ ";
}
<!--Add styling on check -->
input:checked + label {
border: solid 2px purple;
color: purple;
}
</style>
</head>
<body>
<input id="apple" type="checkbox" name="apple" />
<label for="apple">Apple</label>
</body>
</html>
Producción:
Resultado
Navegador compatible:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por priyankrastogi y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA