Pure CSS bootstrap CheckBox reemplazo
| Autor: | Artur-A |
|---|---|
| Views Total: | 3,200 |
| Sitio oficial: | Ir a la web |
| Actualizado: | October 6, 2016 |
| Licencia: | MIT |
Vista prévia
Descripción
Una solución CSS pura para embellecer las casillas de bootstrap predeterminadas sin ninguna imagen y JavaScript.
How it works:
- casilla de verificación ocultar original
- encontrar el intervalo más cercano con la clase de casilla de verificación-marcador de posición y dibuje la casilla personalizada
- dibujar una marca de verificación antes del marcador de posición del span cuando se comprueba la entrada oculta original
- Cuando la casilla de verificación está enfocada con la tecla TAB mostrar puntos
Funcionamiento
Cargue el CheckBox-bootstrap. CSS en la sección Head que proporcionará los estilos predeterminados para las casillas de verificación bootstrap.
<link rel="stylesheet" href="checkbox-bootstrap.css">
Envuelva la casilla bootstrap normal en un elemento Label con la clase CSS de ' CheckBox-placeholder '.
<label class="checkbox-bootstrap"> <input type="checkbox"> <span class="checkbox-placeholder"></span> Checkbox </label>
Eso es todo. Siéntase libre de invalidar las reglas CSS predeterminadas para crear sus propios estilos.
