para - title label html




¿Cómo diseñar una casilla de verificación usando CSS? (18)

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 :

  1. No necesitas bibliotecas y archivos externos
  2. No necesitas agregar HTML extra en tu página
  3. 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;
}

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

Demo de trabajo

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.


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) .

Ejemplo de violín

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.

"¿Puedo usar?" enlazar


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 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)

Ver ejemplo Fiddle

$(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" /> &nbsp;
<span></span>
<br>
<input type="checkbox" checked="checked" class="flipswitch" /> &nbsp;
<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:

  1. Ocultar casillas de verificación

    input[type="checkbox"] {
      position: absolute;
      opacity: 0;
      z-index: -1;
    }
    

    Solo uso un z-index negativo z-index ya que mi ejemplo usa un aspecto de casilla de verificación lo suficientemente grande como para cubrirlo completamente. No recomiendo a la left: -999px ya que no es reutilizable en todos los left: -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 la appearance: none , vea la respuesta de Joost :

    input[type="checkbox"] {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
    }
    
  2. Etiqueta de casilla de verificación de estilo

    input[type="checkbox"] + span {
      font: 16pt sans-serif;
      color: #000;
    }
    
  3. 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;
    }
    

    \00f096 es el square-o Font Awesome, el relleno se ajusta para proporcionar un contorno de puntos uniforme en el enfoque (ver más abajo).

  4. Añadir casilla de verificación casilla comprobada

    input[type="checkbox"]:checked + span:before {
      content: '\00f046';
    }
    

    \00f046 es el check-square-o Font Awesome, que no es el mismo ancho que square-o , que es la razón del estilo de ancho de arriba.

  5. 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.navigator para detectar el navegador y omitirlo si es Safari.

  6. Establecer color gris para casilla de verificación desactivada

    input[type="checkbox"]:disabled + span {
      color: #999;
    }
    
  7. 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.


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

http://jsfiddle.net/v71kn3pr/

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>

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>

https://jsfiddle.net/rvgccn5b/


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">&nbsp;</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>

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>&nbsp;</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

  1. 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
  2. Copie / skins / minimal / folder y icheck.js en su sitio.
  3. 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>
  1. Agregue algunas casillas de verificación y botones de radio a su HTML:

  2. 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>
    
  3. 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>
    
  4. Hecho





checkbox