html - formularios - ¿Cómo diseñar una casilla de verificación usando CSS?
title html css (27)
Estoy tratando de diseñar una casilla de verificación usando lo siguiente:
<input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" />
Pero el estilo no se aplica. La casilla de verificación aún muestra su estilo predeterminado. ¿Cómo le doy el estilo especificado?
No se requiere JavaScript o Jquery .
Cambia tu forma de casilla de manera sencilla.
HTML
<input type="checkbox" id="option" />
<label for="option"> <span></span> Click me </label>
CSS
input[type="checkbox"] {
display: none;
border: none !important;
box-shadow: none !important;
}
input[type="checkbox"] + label span {
background: url(http://imgh.us/uncheck.png);
width: 49px;
height: 49px;
display: inline-block;
vertical-align: middle;
}
input[type="checkbox"]:checked + label span {
background: url(http://imgh.us/check_2.png);
width: 49px;
height: 49px;
vertical-align: middle;
}
Aquí está el enlace de JsFiddle: https://jsfiddle.net/05y2bge3/
Simple de implementar y solución fácilmente personalizable.
Después de muchas búsquedas y pruebas, obtuve esta solución que es fácil de implementar y personalizar. En esta solución :
- No necesitas bibliotecas y archivos externos
- No necesitas agregar HTML extra en tu página
- No es necesario cambiar los nombres de las casillas de verificación y la ID
Simplemente ponga el CSS que fluye en la parte superior de su página y todo el estilo de las casillas de verificación cambiará así:
input[type=checkbox] {
transform: scale(1.5);
}
input[type=checkbox] {
width: 30px;
height: 30px;
margin-right: 8px;
cursor: pointer;
font-size: 17px;
visibility: hidden;
}
input[type=checkbox]:after {
content: " ";
background-color: #fff;
display: inline-block;
margin-left: 10px;
padding-bottom: 5px;
color: #00BFF0;
width: 22px;
height: 25px;
visibility: visible;
border: 1px solid #00BFF0;
padding-left: 3px;
border-radius: 5px;
}
input[type=checkbox]:checked:after {
content: "/2714";
padding: -5px;
font-weight: bold;
}
Antes de comenzar (a partir de enero de 2015)
La pregunta y la respuesta original tienen ahora ~ 5 años. Como tal, esto es un poco de una actualización.
En primer lugar, hay varios enfoques cuando se trata de diseñar casillas de verificación. El principio básico es:
Deberá ocultar el control de casilla de verificación predeterminado que está diseñado por su navegador y que no puede ser anulado de ninguna manera significativa usando CSS.
Con el control oculto, aún tendrá que poder detectar y cambiar su estado verificado
El estado marcado de la casilla de verificación deberá reflejarse mediante el diseño de un nuevo elemento.
La solución (en principio)
Lo anterior se puede lograr por varios medios, y a menudo escuchará que el uso de pseudo-elementos CSS3 es la forma correcta. En realidad, no existe una manera real correcta o incorrecta, depende del enfoque más adecuado para el contexto en el que lo usará. Dicho esto, tengo una preferida.
Envuelve tu casilla de verificación en un elemento de
label. Esto significará que, incluso cuando está oculto, puede alternar su estado marcado al hacer clic en cualquier lugar dentro de la etiqueta.Ocultar su casilla de verificación
Agregue un nuevo elemento después de la casilla de verificación que va a diseñar en consecuencia. Debe aparecer después de la casilla de verificación para que pueda seleccionarse mediante CSS y con estilo dependiendo del estado
:checked. CSS no puede seleccionar ''hacia atrás''.
La solución (en código)
label input {
visibility: hidden;/* <-- hide the default checkbox, the rest is to hide and alllow tabbing, which display:none prevents */
display:block;
height:0;
width:0;
position:absolute;
overflow:hidden;
}
label span {/* <-- style the artificial checkbox */
height: 10px;
width: 10px;
border: 1px solid grey;
display: inline-block;
}
[type=checkbox]:checked + span {/* <-- style its checked state */
background: black;
}
<label>
<input type=''checkbox''>
<span></span>
Checkbox label text
</label>
Refinamiento (usando iconos)
¡Pero hey! Te oigo gritar ¿Qué pasa si quiero mostrar una pequeña garrapata o una cruz en la caja? ¡Y no quiero usar imágenes de fondo!
Bueno, aquí es donde los pseudo-elementos de CSS3 pueden entrar en juego. Estos admiten la propiedad de content que le permite inyectar iconos Unicode que representan a cualquiera de los estados. Alternativamente, puede usar una fuente de íconos de fuentes de terceros, como una fuente impresionante (aunque asegúrese de establecer también la font-family relevante, por ejemplo, en FontAwesome )
label input {
display: none; /* hide the default checkbox */
}
/* style the artificial checkbox */
label span {
height: 10px;
width: 10px;
border: 1px solid grey;
display: inline-block;
position: relative;
}
/* style its checked state..with a ticked icon */
[type=checkbox]:checked + span:before {
content: ''/2714'';
position: absolute;
top: -5px;
left: 0;
}
<label>
<input type=''checkbox''>
<span></span>
Checkbox label text
</label>
Mi solución
input[type="checkbox"] {
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
background: lightgray;
height: 16px;
width: 16px;
border: 1px solid white;
}
input[type="checkbox"]:checked {
background: #2aa1c0;
}
input[type="checkbox"]:hover {
filter: brightness(90%);
}
input[type="checkbox"]:disabled {
background: #e6e6e6;
opacity: 0.6;
pointer-events: none;
}
input[type="checkbox"]:after {
content: '''';
position: relative;
left: 40%;
top: 20%;
width: 15%;
height: 40%;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
display: none;
}
input[type="checkbox"]:checked:after {
display: block;
}
input[type="checkbox"]:disabled:after {
border-color: #7b7b7b;
}
<input type="checkbox"><br>
<input type="checkbox" checked><br>
<input type="checkbox" disabled><br>
<input type="checkbox" disabled checked><br>
¡Ay! Todas estas soluciones me han llevado a la conclusión de que la casilla de verificación HTML apesta un poco si quieres darle un estilo.
Como advertencia, esto no es una implementación de css. Simplemente pensé que compartiría la solución que se me ocurrió en caso de que alguien más pudiera encontrarlo útil.
Utilicé el elemento canvas HTML5.
La ventaja de esto es que no tiene que usar imágenes externas y probablemente pueda ahorrar algo de ancho de banda.
La desventaja es que si un navegador por alguna razón no puede procesarlo correctamente, entonces no hay un retroceso. Aunque si esto sigue siendo un problema en 2017 es discutible.
Actualizar
Encontré el código antiguo bastante feo, así que decidí darle una nueva versión.
Object.prototype.create = function(args){
var retobj = Object.create(this);
retobj.constructor(args || null);
return retobj;
}
var Checkbox = Object.seal({
width: 0,
height: 0,
state: 0,
document: null,
parent: null,
canvas: null,
ctx: null,
/*
* args:
* name default desc.
*
* width 15 width
* height 15 height
* document window.document explicit document reference
* target this.document.body target element to insert checkbox into
*/
constructor: function(args){
if(args === null)
args = {};
this.width = args.width || 15;
this.height = args.height || 15;
this.document = args.document || window.document;
this.parent = args.target || this.document.body;
this.canvas = this.document.createElement("canvas");
this.ctx = this.canvas.getContext(''2d'');
this.canvas.width = this.width;
this.canvas.height = this.height;
this.canvas.addEventListener("click", this.ev_click(this), false);
this.parent.appendChild(this.canvas);
this.draw();
},
ev_click: function(self){
return function(unused){
self.state = !self.state;
self.draw();
}
},
draw_rect: function(color, offset){
this.ctx.fillStyle = color;
this.ctx.fillRect(offset, offset,
this.width - offset * 2, this.height - offset * 2);
},
draw: function(){
this.draw_rect("#CCCCCC", 0);
this.draw_rect("#FFFFFF", 1);
if(this.is_checked())
this.draw_rect("#000000", 2);
},
is_checked: function(){
return !!this.state;
}
});
Aquí hay una demostración de trabajo .
La nueva versión utiliza prototipos y herencia diferencial para crear un sistema eficiente para crear casillas de verificación. Para crear una casilla de verificación:
var my_checkbox = Checkbox.create();
Esto agregará inmediatamente la casilla de verificación al DOM y conectará los eventos. Para consultar si una casilla está marcada:
my_checkbox.is_checked(); // true if checked, else false
También es importante tener en cuenta que me deshice del bucle.
Actualización 2
Algo que olvidé mencionar en la última actualización es que usar el lienzo tiene más ventajas que solo hacer una casilla de verificación que se vea como quiera que se vea. También puede crear casillas de verificación de múltiples estados , si así lo desea.
Object.prototype.create = function(args){
var retobj = Object.create(this);
retobj.constructor(args || null);
return retobj;
}
Object.prototype.extend = function(newobj){
var oldobj = Object.create(this);
for(prop in newobj)
oldobj[prop] = newobj[prop];
return Object.seal(oldobj);
}
var Checkbox = Object.seal({
width: 0,
height: 0,
state: 0,
document: null,
parent: null,
canvas: null,
ctx: null,
/*
* args:
* name default desc.
*
* width 15 width
* height 15 height
* document window.document explicit document reference
* target this.document.body target element to insert checkbox into
*/
constructor: function(args){
if(args === null)
args = {};
this.width = args.width || 15;
this.height = args.height || 15;
this.document = args.document || window.document;
this.parent = args.target || this.document.body;
this.canvas = this.document.createElement("canvas");
this.ctx = this.canvas.getContext(''2d'');
this.canvas.width = this.width;
this.canvas.height = this.height;
this.canvas.addEventListener("click", this.ev_click(this), false);
this.parent.appendChild(this.canvas);
this.draw();
},
ev_click: function(self){
return function(unused){
self.state = !self.state;
self.draw();
}
},
draw_rect: function(color, offsetx, offsety){
this.ctx.fillStyle = color;
this.ctx.fillRect(offsetx, offsety,
this.width - offsetx * 2, this.height - offsety * 2);
},
draw: function(){
this.draw_rect("#CCCCCC", 0, 0);
this.draw_rect("#FFFFFF", 1, 1);
this.draw_state();
},
draw_state: function(){
if(this.is_checked())
this.draw_rect("#000000", 2, 2);
},
is_checked: function(){
return this.state == 1;
}
});
var Checkbox3 = Checkbox.extend({
ev_click: function(self){
return function(unused){
self.state = (self.state + 1) % 3;
self.draw();
}
},
draw_state: function(){
if(this.is_checked())
this.draw_rect("#000000", 2, 2);
if(this.is_partial())
this.draw_rect("#000000", 2, (this.height - 2) / 2);
},
is_partial: function(){
return this.state == 2;
}
});
Modifiqué ligeramente el Checkboxuso en el último fragmento de código para que sea más genérico, haciendo posible "extenderlo" con una casilla de verificación que tiene 3 estados. Aquí hay una demo . Como puede ver, ya tiene más funcionalidad que la casilla de verificación integrada.
Algo a tener en cuenta al elegir entre JavaScript y CSS.
Código antiguo, mal diseñado
Primero, crea un lienzo.
var canvas = document.createElement(''canvas''),
ctx = canvas.getContext(''2d''),
checked = 0; // The state of the checkbox
canvas.width = canvas.height = 15; // Set the width and height of the canvas
document.body.appendChild(canvas);
document.body.appendChild(document.createTextNode('' Togglable Option''));
A continuación, diseña una forma de actualizar el lienzo.
(function loop(){
// Draws a border
ctx.fillStyle = ''#ccc'';
ctx.fillRect(0,0,15,15);
ctx.fillStyle = ''#fff'';
ctx.fillRect(1,1,13,13);
// Fills in canvas if checked
if(checked){
ctx.fillStyle = ''#000'';
ctx.fillRect(2,2,11,11);
}
setTimeout(loop,1000/10); // refresh 10 times per second
})();
La última parte es hacerlo interactivo. Por suerte, es bastante simple:
canvas.onclick = function(){
checked = !checked;
}
Aquí es donde podría tener problemas en IE, debido a su extraño modelo de manejo de eventos en javascript.
Espero que esto ayude a alguien, definitivamente satisfizo mis necesidades.
ACTUALIZACIÓN: la siguiente respuesta hace referencia al estado de las cosas antes de la disponibilidad generalizada de CSS3. En los navegadores modernos (incluido Internet Explorer 9 y versiones posteriores) es más sencillo crear reemplazos de casillas de verificación con su estilo preferido, sin usar javascript.
Aquí hay algunos enlaces útiles:
- Creación de casillas de verificación de formulario personalizado con solo CSS
- Easy CSS Checkbox Generator
- Cosas que puedes hacer con el Checkbox Hack
- Implementando casillas de verificación y botones de radio personalizados con CSS3
- Cómo diseñar una casilla de verificación con CSS
Vale la pena señalar que la cuestión fundamental no ha cambiado. Aún no puede aplicar estilos (bordes, etc.) directamente al elemento de casilla de verificación y estos estilos afectan la visualización de la casilla de verificación HTML. Sin embargo, lo que ha cambiado es que ahora es posible ocultar la casilla de verificación real y reemplazarla con un elemento de estilo propio, sin usar nada más que CSS. En particular, debido a que CSS ahora tiene un selector ampliamente :checked puede hacer que su reemplazo refleje correctamente el estado marcado de la casilla.
RESPUESTA MAYOR
Aquí hay un artículo útil sobre las casillas de verificación de estilo . Básicamente, lo que el escritor descubrió fue que varía enormemente de un navegador a otro, y que muchos navegadores siempre muestran la casilla de verificación predeterminada, sin importar cómo lo diseñe. Así que realmente no hay una manera fácil.
No es difícil imaginar una solución alternativa en la que utilizaría javascript para superponer una imagen en la casilla de verificación y hacer clic en esa imagen hace que se marque la casilla de verificación real. Los usuarios sin javascript verían la casilla de verificación predeterminada.
Editado para agregar: aquí hay un buen script que hace esto por ti ; oculta el elemento de casilla de verificación real, lo reemplaza con un espacio de estilo y redirige los eventos de clic.
Aquí hay una solución CSS simple sin jQuery o javascript
Estoy usando íconos de FontAwseome pero puedes usar cualquier imagen
input[type=checkbox] {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
visibility: hidden;
font-size: 14px;
}
input[type=checkbox]:before {
content: @fa-var-square-o;
visibility: visible;
/*font-size: 12px;*/
}
input[type=checkbox]:checked:before {
content: @fa-var-check-square-o;
}
Esta es una publicación bastante antigua, pero recientemente encontré una solución bastante interesante al problema.
Podrías usar appearance: none; para desactivar la casilla de verificación de su estilo predeterminado y luego escribir el suyo sobre él como se describe aquí (Ejemplo 4) .
input[type=checkbox] {
width: 23px;
height: 23px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin-right: 10px;
background-color: #878787;
outline: 0;
border: 0;
display: inline-block;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
input[type=checkbox]:focus {
outline: none;
border: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
input[type=checkbox]:checked {
background-color: green;
text-align: center;
line-height: 15px;
}
<input type="checkbox">
Desafortunadamente, el soporte del navegador es bastante malo para la opción de appearance de mis pruebas personales, solo funcioné correctamente con Opera y Chrome. Pero este sería el camino a seguir para mantenerlo simple cuando llegue un mejor soporte o solo desee utilizar Chrome / Opera.
Hay una manera de hacer esto usando solo CSS. Podemos (ab) usar el elemento de label y el estilo que en su lugar. La advertencia es que esto no funcionará para IE8 y versiones inferiores.
CSS:
.myCheckbox input {
// display: none;
// Better than display: none for accessibility reasons
position: relative;
z-index: -9999;
}
.myCheckbox span {
width: 20px;
height: 20px;
display: block;
background: url("link_to_image");
}
.myCheckbox input:checked + span {
background: url("link_to_another_image");
}
HTML:
<label for="test">Label for my styled "checkbox"</label>
<label class="myCheckbox">
<input type="checkbox" name="test"/>
<span></span>
</label>
Prefiero usar fuentes de iconos (como FontAwesome) ya que es fácil modificar sus colores con CSS y se escalan realmente bien en dispositivos de alta densidad de píxeles. Así que aquí hay otra variante de CSS pura, utilizando técnicas similares a las anteriores.
(Abajo hay una imagen estática para que pueda visualizar el resultado; vea el JSFiddle para una versión interactiva)
Al igual que con otras soluciones, utiliza el elemento de label . Un span adyacente tiene nuestro carácter de casilla de verificación.
span.bigcheck-target {
font-family: FontAwesome; /* use an icon font for the checkbox */
}
input[type=''checkbox''].bigcheck {
position: relative;
left: -999em; /* hide the real checkbox */
}
input[type=''checkbox''].bigcheck + span.bigcheck-target:after {
content: "/f096"; /* In fontawesome, is an open square (fa-square-o) */
}
input[type=''checkbox''].bigcheck:checked + span.bigcheck-target:after {
content: "/f046"; /* fontawesome checked box (fa-check-square-o) */
}
/* ==== optional - colors and padding to make it look nice === */
body {
background-color: #2C3E50;
color: #D35400;
font-family: sans-serif;
font-weight: 500;
font-size: 4em; /* set this to whatever size you want */
}
span.bigcheck {
display: block;
padding: 0.5em;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<span class="bigcheck">
<label class="bigcheck">
Cheese
<input type="checkbox" class="bigcheck" name="cheese" value="yes" />
<span class="bigcheck-target"></span>
</label>
</span>
Aquí está el JSFiddle para ello.
Puede label las casillas de verificación con un pequeño truco usando el elemento de label continuación se muestra un ejemplo:
.checkbox > input[type=checkbox] {
visibility: hidden;
}
.checkbox {
position: relative;
display: block;
width: 80px;
height: 26px;
margin: 0 auto;
background: #FFF;
border: 1px solid #2E2E2E;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
.checkbox:after {
position: absolute;
display: inline;
right: 10px;
content: ''no'';
color: #E53935;
font: 12px/26px Arial, sans-serif;
font-weight: bold;
text-transform: capitalize;
z-index: 0;
}
.checkbox:before {
position: absolute;
display: inline;
left: 10px;
content: ''yes'';
color: #43A047;
font: 12px/26px Arial, sans-serif;
font-weight: bold;
text-transform: capitalize;
z-index: 0;
}
.checkbox label {
position: absolute;
display: block;
top: 3px;
left: 3px;
width: 34px;
height: 20px;
background: #2E2E2E;
cursor: pointer;
transition: all 0.5s linear;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
z-index: 1;
}
.checkbox input[type=checkbox]:checked + label {
left: 43px;
}
<div class="checkbox">
<input id="checkbox1" type="checkbox" value="1" />
<label for="checkbox1"></label>
</div>
Y un FIDDLE para el código anterior. Tenga en cuenta que algunos CSS no funcionan en versiones anteriores de los navegadores, pero estoy seguro de que hay algunos ejemplos de JavaScript sofisticados por ahí.
Puedes evitar agregar un margen de beneficio adicional. Esto funciona en todas partes excepto en IE para escritorio (pero funciona en IE para Windows Phone y Microsoft Edge) a través de la configuración de la appearance CSS:
input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Styling checkbox */
width: 16px;
height: 16px;
background-color: red;
}
input[type="checkbox"]:checked {
background-color: green;
}
<input type="checkbox" />
Puedes lograr un excelente efecto de casilla de verificación personalizado utilizando las nuevas habilidades que vienen con :after y :before pseudo clases. La ventaja de esto es que: no necesita agregar nada más al DOM, solo la casilla de verificación estándar.
Tenga en cuenta que esto solo funcionará para navegadores compatibles. Creo que esto está relacionado con el hecho de que algunos navegadores no le permiten configurar :after y :before en los elementos de entrada. Lo que lamentablemente significa que por el momento solo se admiten los navegadores webkit. FF + IE todavía permitirá que funcionen las casillas de verificación, simplemente sin estilo, y esto se espera que cambie en el futuro (el código no usa prefijos de proveedores).
Esta es solo una solución de navegador Webkit (Chrome, Safari, navegadores móviles)
$(function() {
$(''input'').change(function() {
$(''div'').html(Math.random());
});
});
/* Main Classes */
.myinput[type="checkbox"]:before {
position: relative;
display: block;
width: 11px;
height: 11px;
border: 1px solid #808080;
content: "";
background: #FFF;
}
.myinput[type="checkbox"]:after {
position: relative;
display: block;
left: 2px;
top: -11px;
width: 7px;
height: 7px;
border-width: 1px;
border-style: solid;
border-color: #B3B3B3 #dcddde #dcddde #B3B3B3;
content: "";
background-image: linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
background-repeat: no-repeat;
background-position: center;
}
.myinput[type="checkbox"]:checked:after {
background-image: url(''data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC''), linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
}
.myinput[type="checkbox"]:disabled:after {
-webkit-filter: opacity(0.4);
}
.myinput[type="checkbox"]:not(:disabled):checked:hover:after {
background-image: url(''data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC''), linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
}
.myinput[type="checkbox"]:not(:disabled):hover:after {
background-image: linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
border-color: #85A9BB #92C2DA #92C2DA #85A9BB;
}
.myinput[type="checkbox"]:not(:disabled):hover:before {
border-color: #3D7591;
}
/* Large checkboxes */
.myinput.large {
height: 22px;
width: 22px;
}
.myinput.large[type="checkbox"]:before {
width: 20px;
height: 20px;
}
.myinput.large[type="checkbox"]:after {
top: -20px;
width: 16px;
height: 16px;
}
/* Custom checkbox */
.myinput.large.custom[type="checkbox"]:checked:after {
background-image: url(''data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8/AyUYwcAD+OzN/oMwshjRBoA0Gr8+DcbIhhBlAEyz+qZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC''), linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
}
.myinput.large.custom[type="checkbox"]:not(:disabled):checked:hover:after {
background-image: url(''data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8/AyUYwcAD+OzN/oMwshjRBoA0Gr8+DcbIhhBlAEyz+qZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC''), linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%">
<tr>
<td>Normal:</td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" checked="checked" /></td>
<td><input type="checkbox" disabled="disabled" /></td>
<td><input type="checkbox" disabled="disabled" checked="checked" /></td>
</tr>
<tr>
<td>Small:</td>
<td><input type="checkbox" class="myinput" /></td>
<td><input type="checkbox" checked="checked" class="myinput" /></td>
<td><input type="checkbox" disabled="disabled" class="myinput" /></td>
<td><input type="checkbox" disabled="disabled" checked="checked" class="myinput" /></td>
</tr>
<tr>
<td>Large:</td>
<td><input type="checkbox" class="myinput large" /></td>
<td><input type="checkbox" checked="checked" class="myinput large" /></td>
<td><input type="checkbox" disabled="disabled" class="myinput large" /></td>
<td><input type="checkbox" disabled="disabled" checked="checked" class="myinput large" /></td>
</tr>
<tr>
<td>Custom icon:</td>
<td><input type="checkbox" class="myinput large custom" /></td>
<td><input type="checkbox" checked="checked" class="myinput large custom" /></td>
<td><input type="checkbox" disabled="disabled" class="myinput large custom" /></td>
<td><input type="checkbox" disabled="disabled" checked="checked" class="myinput large custom" /></td>
</tr>
</table>
Bonus Webkit estilo flipwitch volante
$(function() {
var f = function() {
$(this).next().text($(this).is('':checked'') ? '':checked'' : '':not(:checked)'');
};
$(''input'').change(f).trigger(''change'');
});
body {
font-family: arial;
}
.flipswitch {
position: relative;
background: white;
width: 120px;
height: 40px;
-webkit-appearance: initial;
border-radius: 3px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
outline: none;
font-size: 14px;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
cursor: pointer;
border: 1px solid #ddd;
}
.flipswitch:after {
position: absolute;
top: 5%;
display: block;
line-height: 32px;
width: 45%;
height: 90%;
background: #fff;
box-sizing: border-box;
text-align: center;
transition: all 0.3s ease-in 0s;
color: black;
border: #888 1px solid;
border-radius: 3px;
}
.flipswitch:after {
left: 2%;
content: "OFF";
}
.flipswitch:checked:after {
left: 53%;
content: "ON";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<h2>Webkit friendly mobile-style checkbox/flipswitch</h2>
<input type="checkbox" class="flipswitch" />
<span></span>
<br>
<input type="checkbox" checked="checked" class="flipswitch" />
<span></span>
Seguiría el consejo de la respuesta de SW4 : ocultar la casilla de verificación y cubrirla con un intervalo personalizado, sugiriendo este HTML
<label>
<input type="checkbox">
<span>send newsletter</span>
</label>
La envoltura en la etiqueta permite hacer clic en el texto sin necesidad de vincular atributos "for-id". Sin embargo,
no lo oculte utilizando la visibility: hidden o display: none
Funciona haciendo clic o tocando, pero esa es una forma limitada de usar las casillas de verificación. Algunas personas aún usan una pestaña mucho más efectiva para mover el enfoque, espacio para activar y ocultarse con ese método lo deshabilita. Si el formulario es largo, uno guardará las muñecas de alguien para usar los atributos tabindex o accesskey . Y si observa el comportamiento de la casilla de verificación del sistema, hay una sombra decente en el desplazamiento. La casilla de verificación bien diseñada debe seguir este comportamiento.
La respuesta de cobberboy recomienda Font Awesome, que suele ser mejor que el mapa de bits, ya que las fuentes son vectores escalables. Trabajando con el HTML anterior, sugeriría estas reglas CSS:
Ocultar casillas de verificación
input[type="checkbox"] { position: absolute; opacity: 0; z-index: -1; }Solo uso un
z-indexnegativoz-indexya que mi ejemplo usa un aspecto de casilla de verificación lo suficientemente grande como para cubrirlo completamente. No recomiendo a laleft: -999pxya que no es reutilizable en todos losleft: -999px. La respuesta de Bushan wagh proporciona una forma a prueba de balas para ocultarlo y convencer al navegador para que use tabindex, por lo que es una buena alternativa. De todos modos, ambos son solo un hack. La forma correcta hoy es laappearance: none, vea la respuesta de Joost :input[type="checkbox"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; }Etiqueta de casilla de verificación de estilo
input[type="checkbox"] + span { font: 16pt sans-serif; color: #000; }Añadir casillero
input[type="checkbox"] + span:before { font: 16pt FontAwesome; content: ''/00f096''; display: inline-block; width: 16pt; padding: 2px 0 0 3px; margin-right: 0.5em; }/00f096es elsquare-oFont Awesome, el relleno se ajusta para proporcionar un contorno de puntos uniforme en el enfoque (ver más abajo).Añadir casilla de verificación casilla comprobada
input[type="checkbox"]:checked + span:before { content: ''/00f046''; }/00f046es elcheck-square-oFont Awesome, que no es el mismo ancho quesquare-o, que es la razón del estilo de ancho de arriba.Añadir esquema de enfoque
input[type="checkbox"]:focus + span:before { outline: 1px dotted #aaa; }Safari no proporciona esta función (consulte el comentario de @Jason Sankey), debe usar
window.navigatorpara detectar el navegador y omitirlo si es Safari.Establecer color gris para casilla de verificación desactivada
input[type="checkbox"]:disabled + span { color: #999; }Establecer sombra de desplazamiento en casilla de verificación no deshabilitada
input[type="checkbox"]:not(:disabled) + span:hover:before { text-shadow: 0 1px 2px #77F; }
demo Fiddle
input[type="checkbox"] {
position: absolute;
opacity: 0;
z-index: -1;
}
input[type="checkbox"] + span {
font: 16pt sans-serif;
color: #000;
}
input[type="checkbox"] + span:before {
font: 16pt FontAwesome;
content: ''/00f096'';
display: inline-block;
width: 16pt;
padding: 2px 0 0 3px;
margin-right: 0.5em;
}
input[type="checkbox"]:checked + span:before {
content: ''/00f046'';
}
input[type="checkbox"]:focus + span:before {
outline: 1px dotted #aaa;
}
input[type="checkbox"]:disabled + span {
color: #999;
}
input[type="checkbox"]:not(:disabled) + span:hover:before {
text-shadow: 0 1px 2px #77F;
}
<label><input type="checkbox"><span>send newsletter</span></label><br>
<label><input type="checkbox" checked disabled><span>I doubt it</span></label><br>
<label><input type="checkbox" disabled><span>well I never</span></label><br>
<label><input type="checkbox"><span>I agree with terms of use</span></label><br>
<label><input type="checkbox"><span>check to confirm</span></label>
Intente colocar el mouse sobre las casillas de verificación y use tab y shift + tab para mover y espacio para alternar.
Advertencia : lo siguiente era cierto en el momento de escribir, pero mientras tanto las cosas han progresado.
Los navegadores modernos de AFAIK muestran casillas de verificación con el control nativo del sistema operativo, por lo que no hay forma de diseñarlas.
Aquí hay una versión solo para CSS / HTML, sin necesidad de Jquery o Javascript, HTML simple y limpio y css realmente simple y corto.
Aquí está el JSFiddle
Aquí está el HTML
<div id="myContainer">
<input type="checkbox" name="myCheckbox" id="myCheckbox_01_item" value="red" />
<label for="myCheckbox_01_item" class="box"></label>
<label for="myCheckbox_01_item" class="text">I accept the Terms of Use.</label>
</div>
Aquí está el CSS
#myContainer {
outline: black dashed 1px;
width: 200px;
}
#myContainer input[type="checkbox"][name="myCheckbox"] {
display: none;
}
#myContainer input[type="checkbox"][name="myCheckbox"]:not(:checked) + label.box {
display: inline-block;
width: 25px;
height: 25px;
border: black solid 1px;
background: #FFF ;
margin: 5px 5px;
}
#myContainer input[type="checkbox"][name="myCheckbox"]:checked + label.box {
display: inline-block;
width: 25px;
height: 25px;
border: black solid 1px;
background: #F00;
margin: 5px 5px;
}
#myContainer input[type="checkbox"][name="myCheckbox"] + label + label.text {
font: normal 12px arial;
display: inline-block;
line-height: 27px;
vertical-align: top;
margin: 5px 0px;
}
Esto se puede adaptar para poder tener radio individual o casillas de verificación, ajustes de casillas de verificación y grupos de botones de radio también.
Este html / css, también le permitirá capturar y hacer clic en la etiqueta, por lo que la casilla de verificación se marcará y desactivará incluso si hace clic en la etiqueta.
Este tipo de casilla de verificación / botón de radio funciona perfectamente con cualquier forma, sin ningún problema. Han sido probados usando php, aspx, javafaces y coldfusion también.
Esta es la forma más sencilla y puede elegir qué casillas de verificación dar a este estilo.
CSS:
.check-box input {
display: none;
}
.check-box span:before {
content: '' '';
width: 20px;
height: 20px;
display: inline-block;
background: url("unchecked.png");
}
.check-box input:checked + span:before {
background: url("checked.png");
}
HTML:
<label class="check-box">
<input type="checkbox">
<span>Check box Text</span>
</label>
Modifique el estilo de la casilla de verificación con CSS3 simple, no requiere ninguna manipulación de JS y HTML.
.form input[type="checkbox"]:before {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
content: "/f096";
opacity: 1 !important;
margin-top: -25px;
appearance: none;
background: #fff;
}
.form input[type="checkbox"]:checked:before {
content: "/f046";
}
.form input[type="checkbox"] {
font-size: 22px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<form class="form">
<input type="checkbox" />
</form>
Parece que puede cambiar el color de la casilla de verificación en escala de grises utilizando solo CSS.
Lo siguiente convierte las casillas de verificación de negro a gris (que era lo que yo quería):
input[type="checkbox"] {
opacity: .5;
}
Una plantilla simple y ligera también:
input[type=checkbox] {
cursor: pointer;
}
input[type=checkbox]:checked:before {
content: "/2713";
background: #fffed5;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
font-size: 20px;
text-align: center;
line-height: 8px;
display: inline-block;
width: 13px;
height: 15px;
color: #00904f;
border: 1px solid #cdcdcd;
border-radius: 4px;
margin: -3px -3px;
text-indent: 1px;
}
input[type=checkbox]:before {
content: "/202A";
background: #ffffff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
font-size: 20px;
text-align: center;
line-height: 8px;
display: inline-block;
width: 13px;
height: 15px;
color: #00904f;
border: 1px solid #cdcdcd;
border-radius: 4px;
margin: -3px -3px;
text-indent: 1px;
}
<input type="checkbox" checked="checked">checked1<br>
<input type="checkbox">unchecked2<br>
<input type="checkbox" checked="checked" id="id1">
<label for="id1">checked2+label</label><br>
<label for="id2">unchecked2+label+rtl</label>
<input type="checkbox" id="id2">
<br>
solución rápida para agregar el icono delante del texto:
< asp:CheckBox... Text="< img src=''/link/to/img.png'' />My Text" />
Creo que la forma más fácil de hacerlo es diseñando un estilo labely haciendo lo checkboxinvisible.
HTML
<input type="checkbox" id="first" />
<label for="first"> </label>
CSS
checkbox {
display: none;
}
checkbox + label {
/* Style for checkbox normal */
width: 16px;
height: 16px;
}
checkbox::checked + label,
label.checked {
/* Style for checkbox checked */
}
El checkboxa pesar de que se oculta todavía será accesible y su valor será enviado cuando se envía un formulario. Para los navegadores antiguos, es posible que tenga que cambiar la clase de la labelmarcada con JavaScript porque no creo que las versiones antiguas de IE se entiendan ::checkeden el checkbox.
Dado que los navegadores como Edge y Firefox no son compatibles: antes: después de las etiquetas de entrada de la casilla de verificación, esta es una alternativa puramente con HTML y CSS. Por supuesto debes editar css de acuerdo a tus requerimientos.
Haga el html para la casilla de verificación de esta manera:
<div class=''custom-checkbox''>
<input type=''checkbox'' />
<label>
<span></span>
Checkbox label
</label>
</div>
Aplique este estilo en la casilla de verificación para cambiar la etiqueta de color.
<style>
.custom-checkbox {
position: relative;
}
.custom-checkbox input{
position: absolute;
left: 0;
top: 0;
height:15px;
width: 50px; /* Expand the checkbox so that it covers */
z-index : 1; /* the label and span, increase z-index to bring it over */
opacity: 0; /* the label and set opacity to 0 to hide it. */
}
.custom-checkbox input+label {
position: relative;
left: 0;
top: 0;
padding-left: 25px;
color: black;
}
.custom-checkbox input+label span {
position: absolute; /* a small box to display as checkbox */
left: 0;
top: 0;
height: 15px;
width: 15px;
border-radius: 2px;
border: 1px solid black;
background-color: white;
}
.custom-checkbox input:checked+label { /* change label color when checked */
color: orange;
}
.custom-checkbox input:checked+label span{ /* change span box color when checked */
background-color: orange;
border: 1px solid orange;
}
</style>
Desde mi búsqueda en Google, esta es la forma más fácil para el estilo de casilla de verificación. Solo agregue: después y: marcado: después de css según su diseño.
body{
background: #DDD;
}
span{
margin-left: 30px;
}
input[type=checkbox] {
cursor: pointer;
font-size: 17px;
visibility: hidden;
position: absolute;
top: 0;
left: 0;
transform: scale(1.5);
}
input[type=checkbox]:after {
content: " ";
background-color: #fff;
display: inline-block;
color: #00BFF0;
width: 14px;
height: 19px;
visibility: visible;
border: 1px solid #FFF;
padding: 0 3px;
margin: 2px 0;
border-radius: 8px;
box-shadow: 0 0 15px 0 rgba(0,0,0,0.08), 0 0 2px 0 rgba(0,0,0,0.16);
}
input[type=checkbox]:checked:after {
content: "/2714";
display: unset;
font-weight: bold;
}
<input type="checkbox"> <span>Select Text</span>
No, todavía no puede aplicar el estilo a la casilla de verificación, pero (finalmente) descubrí cómo diseñar una ilusión manteniendo la funcionalidad de hacer clic en una casilla de verificación. ¡Significa que puede alternarlo incluso si el cursor no está perfectamente quieto sin correr el riesgo de seleccionar texto o activar la función de arrastrar y soltar!
Esta solución probablemente también se ajusta a los botones de radio.
Lo siguiente funciona en IE9, FF30.0 y Chrome 40.0.2214.91 y es solo un ejemplo básico. Todavía puedes usarlo en combinación con imágenes de fondo y pseudo-elementos.
http://jsfiddle.net/o0xo13yL/1/
label {
display: inline-block;
position: relative; /* needed for checkbox absolute positioning */
background-color: #eee;
padding: .5rem;
border: 1px solid #000;
border-radius: .375rem;
font-family: "Courier New";
font-size: 1rem;
line-height: 1rem;
}
label > input[type="checkbox"] {
display: block;
position: absolute; /* remove it from the flow */
width: 100%;
height: 100%;
margin: -.5rem; /* negative the padding of label to cover the "button" */
cursor: pointer;
opacity: 0; /* make it transparent */
z-index: 666; /* place it on top of everything else */
}
label > input[type="checkbox"] + span {
display: inline-block;
width: 1rem;
height: 1rem;
border: 1px solid #000;
margin-right: .5rem;
}
label > input[type="checkbox"]:checked + span {
background-color: #666;
}
<label>
<input type="checkbox" />
<span> </span>Label text
</label>
Puede usar iCheck que las casillas de verificación y los botones de opción están personalizados para jQuery & Zepto, tal vez le ayude
Asegúrese de que jQuery v1.7 + esté cargado antes de icheck.js
- Elija un esquema de color, hay 10 estilos diferentes disponibles:
- Negro - minimal.css
- Rojo - red.css
- Verde - verde.css
- Azul - azul.css
- Aero - aero.css
- Gris - grey.css
- Naranja - orange.css
- Amarillo - amarillo.css
- Rosa - pink.css
- Púrpura - purple.css
- Copie / skins / minimal / folder y icheck.js en su sitio.
Inserte antes en su HTML (reemplace su ruta y esquema de color):
Ejemplo para un esquema de color rojo:
<link href="your-path/minimal/red.css" rel="stylesheet">
<script src="your-path/icheck.js"></script>
Agregue algunas casillas de verificación y botones de radio a su HTML:
Agregue JavaScript a su HTML para iniciar el complemento iCheck:
<script> $(document).ready(function(){ $(''input'').iCheck({ checkboxClass: ''icheckbox_minimal'', radioClass: ''iradio_minimal'', increaseArea: ''20%'' // optional }); }); </script>Para diferentes esquemas de color negro use este código (ejemplo para Red):
<script> $(document).ready(function(){ $(''input'').iCheck({ checkboxClass: ''icheckbox_minimal-red'', radioClass: ''iradio_minimal-red'', increaseArea: ''20%'' // optional }); }); </script>Hecho
input[type=checkbox].css-checkbox {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height:1px;
width:1px;
margin:-1px;
padding:0;
border:0;
}
input[type=checkbox].css-checkbox + label.css-label {
padding-left:20px;
height:15px;
display:inline-block;
line-height:15px;
background-repeat:no-repeat;
background-position: 0 0;
font-size:15px;
vertical-align:middle;
cursor:pointer;
}
input[type=checkbox].css-checkbox:checked + label.css-label {
background-position: 0 -15px;
}
.css-label{
background-image:url(http://csscheckbox.com/checkboxes/dark-check-green.png);
}