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?

ACTUALIZAR:

La respuesta a continuación hace referencia al estado de cosas antes de la disponibilidad generalizada de CSS 3. 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:

• Crear casillas de verificación de formularios personalizados con solo CSS
• Easy CSS Checkbox Generator
• Cosas que puedes hacer con el Hack de Checkbox
• Implementación de casillas de verificación personalizadas y botones de radio con CSS3
• Cómo diseñar una casilla de verificación con CSS

Vale la pena señalar que el problema fundamental no ha cambiado. Todavía no puede aplicar estilos (bordes, etc.) directamente al elemento de casilla de verificación y hacer que esos estilos afecten 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 con estilo propio, utilizando nada más que CSS. En particular, debido a que CSS ahora tiene un :checkedselector ampliamente compatible , puede hacer que su reemplazo refleje correctamente el estado marcado de la casilla.

RESPUESTA ANTIGUA

Aquí hay un artículo útil sobre las casillas de estilo . Básicamente, ese escritor descubrió 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. Entonces realmente no hay una manera fácil.

No es difícil imaginar una solución alternativa en la que usaría JavaScript para superponer una imagen en la casilla de verificación y hacer clic en esa imagen para que se active 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 usted ; oculta el elemento de casilla de verificación real, lo reemplaza con un espacio con estilo y redirige los eventos de clic.

Hay una manera de hacer esto usando solo CSS. Podemos (ab) usar el labelelemento y darle estilo a ese elemento. La advertencia es que esto no funcionará para Internet Explorer 8 y versiones inferiores.

.myCheckbox input {
  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");
}

<label for="test">Label for my styled "checkbox"</label>
<label class="myCheckbox">
  <input type="checkbox" name="test" />
  <span></span>
</label>

Puede lograr un efecto de casilla de verificación personalizada bastante interesante utilizando las nuevas habilidades que vienen con las :aftery :beforepseudo 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 al conjunto :aftery :beforede los elementos de entrada. Lo que desafortunadamente significa que por el momento solo se admiten los navegadores WebKit. Firefox + Internet Explorer seguirá permitiendo que las casillas de verificación funcionen, simplemente sin estilo, y es de esperar que esto cambie en el futuro (el código no usa prefijos de proveedor).

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>

Violín de estilo webkit extra de violín

$(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>

Antes de comenzar (a partir de enero de 2015)

La pregunta y la respuesta originales tienen ahora ~ 5 años. Como tal, esta es una pequeña actualización.

En primer lugar, hay una serie de enfoques cuando se trata de las casillas de estilo. El principio básico es:

1. Deberá ocultar el control de casilla de verificación predeterminado que tiene el estilo de su navegador y que no se puede anular de manera significativa con CSS.

2. Con el control oculto, aún deberá poder detectar y alternar su estado marcado

3. El estado marcado de la casilla de verificación deberá reflejarse al diseñar un nuevo elemento

La solución (en principio)

Lo anterior se puede lograr por varios medios, y a menudo escuchará que usar pseudoelementos CSS3 es la forma correcta. En realidad, no existe una forma correcta o incorrecta real, depende del enfoque más adecuado para el contexto en el que lo utilizará. Dicho esto, tengo uno preferido.

1. Envuelva su casilla de verificación en un labelelemento. Esto significará que incluso cuando está oculto, aún puede alternar su estado marcado al hacer clic en cualquier lugar dentro de la etiqueta.

2. Ocultar su casilla de verificación

3. Agregue un nuevo elemento después de la casilla de verificación que diseñará en consecuencia. Debe aparecer después de la casilla de verificación para que pueda seleccionarse usando CSS y tener un estilo que dependa del :checkedestado. 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 allow 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 escucho gritar. ¿Qué pasa si quiero mostrar una pequeña marca o cruz en la casilla? ¡Y no quiero usar imágenes de fondo!

Bueno, aquí es donde los pseudoelementos de CSS3 pueden entrar en juego. Estos admiten la contentpropiedad que le permite inyectar iconos Unicode que representan cualquier estado. Alternativamente, puede usar una fuente de icono de fuente de terceros, como fuente impresionante (aunque asegúrese de configurar también la correspondiente font-family, por ejemplo, a 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>

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 etiqueta de ajuste permite perfectamente hacer clic en el texto sin necesidad de vinculación de atributos "for-id". Sin embargo,

No lo ocultes usando visibility: hiddenodisplay: none

Funciona haciendo clic o tocando, pero esa es una forma poco convincente de usar casillas de verificación. Algunas personas todavía usan mucho más efectivo Tabpara mover el foco, Spaceactivarlo y esconderse con ese método lo deshabilita. Si el formulario es largo, se guardarán las muñecas de alguien para usarlas tabindexo accesskeyatributos. 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 generalmente es 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;
   }

   Utilizo solo negativo z-indexya que mi ejemplo usa una máscara de casilla de verificación lo suficientemente grande como para cubrirla por completo. No lo recomiendo left: -999pxya que no es reutilizable en todos los diseños. La respuesta de Bushan wagh proporciona una forma a prueba de balas para ocultarlo y convencer al navegador de que use tabindex, por lo que es una buena alternativa. De todos modos, ambos son solo un truco. La forma correcta hoy es appearance: none, ver la respuesta de Joost :

   input[type="checkbox"] {
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
   }

2. Etiqueta de casilla de estilo

   input[type="checkbox"] + span {
     font: 16pt sans-serif;
     color: #000;
   }

3. Agregar casilla de verificación

   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 de Font Awesome square-o, el relleno se ajusta para proporcionar un contorno punteado uniforme en el foco (ver más abajo).

4. Agregar casilla marcada

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

   \00f046es Font Awesome's check-square-o, que no tiene el mismo ancho que square-o, que es la razón del estilo de ancho anterior.

5. Agregar esquema de enfoque

   input[type="checkbox"]:focus + span:before {
     outline: 1px dotted #aaa;
   }

   Safari no proporciona esta función (vea el comentario de @Jason Sankey), debe usar window.navigatorpara detectar el navegador y omitirlo si es Safari.

6. Establecer color gris para casilla deshabilitada

   input[type="checkbox"]:disabled + span {
     color: #999;
   }

7. Establecer la sombra de desplazamiento en la casilla de verificación no deshabilitada

   input[type="checkbox"]:not(:disabled) + span:hover:before {
     text-shadow: 0 1px 2px #77F;
   }

Violín de demostración

Intente pasar el mouse sobre las casillas de verificación y use Taby Shift+ Tabpara mover y Spacealternar.

Puede diseñar casillas de verificación con un pequeño truco utilizando el labelelemento que se muestra a continuación:

.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 navegadores, ¡pero estoy seguro de que hay algunos ejemplos de JavaScript sofisticados!

Solución fácil de implementar y fácilmente personalizable.

Después de muchas búsquedas y pruebas obtuve esta solución que es simple de implementar y más fácil de personalizar. En esta solución :

1. No necesita bibliotecas y archivos externos.
2. No necesita agregar HTML adicional en su página
3. No es necesario cambiar los nombres de casilla de verificación y la identificación

Simplemente coloque el CSS que fluye en la parte superior de su página y el estilo de todas 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;
}

Puede evitar agregar marcas adicionales. Esto funciona en todas partes, excepto IE para escritorio (pero funciona en IE para Windows Phone y Microsoft Edge) mediante la configuración de CSS appearance:

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" />

Prefiero usar fuentes de íconos (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 puro, utilizando técnicas similares a las anteriores.

(A continuación se muestra una imagen estática para que pueda visualizar el resultado; consulte el JSFiddle para obtener una versión interactiva).

Al igual que con otras soluciones, utiliza el labelelemento. Un adyacente spancontiene 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.

Recientemente encontré una solución bastante interesante para el problema.

Puede usar appearance: none;para desactivar el estilo predeterminado de la casilla de verificación y luego escribir el suyo sobre él como se describe aquí (Ejemplo 4) .

Violín de ejemplo

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

Lamentablemente, el soporte del navegador es bastante malo para la appearanceopción. De mis pruebas personales solo conseguí que Opera y Chrome funcionaran correctamente. Pero este sería el camino a seguir para mantenerlo simple cuando llegue un mejor soporte o solo desee usar Chrome / Opera.

"¿Puedo usar?" enlace

Con CSS puro, nada sofisticado :beforey :aftersin transformaciones, puede desactivar la apariencia predeterminada y luego diseñarla con una imagen de fondo en línea como el siguiente ejemplo. Esto funciona en Chrome, Firefox, Safari y ahora Edge (Chromium Edge).

INPUT[type=checkbox]:focus
{
    outline: 1px solid rgba(0, 0, 0, 0.2);
}

INPUT[type=checkbox]
{
    background-color: #DDD;
    border-radius: 2px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 17px;
    height: 17px;
    cursor: pointer;
    position: relative;
    top: 5px;
}

INPUT[type=checkbox]:checked
{
    background-color: #409fd6;
    background: #409fd6 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat;
}

<form>
  <label><input type="checkbox">I Agree To Terms &amp; Conditions</label>
</form>

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>

Simplemente puede usar appearance: noneen navegadores modernos, para que no haya un estilo predeterminado y todos sus estilos se apliquen correctamente:

input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  width: 2em;
  height: 2em;
  border: 1px solid gray;
  outline: none;
  vertical-align: middle;
}

input[type=checkbox]:checked {
  background-color: blue;
}

¿Desea NO JavaScript, NO bibliotecas externas, cumplimiento de accesibilidad y casillas de verificación y botones de radio?

He estado desplazándome y desplazándome y toneladas de estas respuestas simplemente arrojan la accesibilidad por la puerta y violan WCAG en más de una forma. Lancé botones de radio ya que la mayoría de las veces cuando estás usando casillas de verificación personalizadas también quieres botones de radio personalizados.

Violines :

• Casillas de verificación - CSS puro - libre de bibliotecas de terceros
• Botones de radio - CSS puro - libre de bibliotecas de terceros
• Las casillas de verificación * que usan FontAwesome pero podrían intercambiarse fácilmente con Glyphicons, etc.

Tarde a la fiesta, pero de alguna manera esto sigue siendo difícil en 2019 2020, así que he agregado mis tres soluciones que son accesibles y fáciles de implementar.

Estos son todos libres de JavaScript , libre de bibliotecas externas * y accesibles ...

Si desea enchufar y usar cualquiera de estos, simplemente copie la hoja de estilo de los violines, edite los códigos de color en el CSS para satisfacer sus necesidades y siga su camino. Puede agregar un icono de marca de verificación de svg personalizado si lo desea para las casillas de verificación. He agregado muchos comentarios para esas personas que no son CSS.

Si tiene texto largo o un contenedor pequeño y se encuentra con un ajuste de texto debajo de la casilla de verificación o la entrada del botón de radio, simplemente convierta a divs como este .

Explicación más larga: necesitaba una solución que no viole WCAG, que no se base en JavaScript o en bibliotecas externas, y que no interrumpa la navegación del teclado como tabulación o barra espaciadora para seleccionar, que permita eventos de enfoque, una solución que permita casillas de verificación deshabilitadas que están ambos activados o desactivados, y finalmente una solución donde puedo personalizar el aspecto de la casilla sin embargo que quiero con diferente background-color's, border-radius, svgfondos, etc.

Utilicé alguna combinación de esta respuesta de @Jan Turoň para encontrar mi propia solución que parece funcionar bastante bien. He hecho un violín de botón de radio que usa mucho del mismo código de las casillas de verificación para que esto también funcione con botones de radio.

Todavía estoy aprendiendo la accesibilidad, así que si me perdí algo, deje un comentario y trataré de corregirlo aquí. Este es un código de ejemplo de mis casillas de verificación:

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

/* Text color for the label */
input[type="checkbox"]+span {
  cursor: pointer;
  font: 16px sans-serif;
  color: black;
}

/* Checkbox un-checked style */
input[type="checkbox"]+span:before {
  content: '';
  border: 1px solid grey;
  border-radius: 3px;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 0.5em;
  margin-top: 0.5em;
  vertical-align: -2px;
}

/* Checked checkbox style (in this case the background is red) */
input[type="checkbox"]:checked+span:before {
  /* NOTE: Replace the url with a path to an SVG of a checkmark to get a checkmark icon */
  background-image: url('https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/collection/build/ionicons/svg/ios-checkmark.svg');
  background-repeat: no-repeat;
  background-position: center;
  /* The size of the checkmark icon, you may/may not need this */
  background-size: 25px;
  border-radius: 2px;
  background-color: #e7ffba;
  color: white;
}

/* Adding a dotted border around the active tabbed-into checkbox */
input[type="checkbox"]:focus+span:before,
input[type="checkbox"]:not(:disabled)+span:hover:before {
  /* Visible in the full-color space */
  box-shadow: 0px 0px 0px 2px rgba(0, 150, 255, 1);

  /* Visible in Windows high-contrast themes
     box-shadow will be hidden in these modes and
     transparency will not be hidden in high-contrast
     thus box-shadow will not show but the outline will
     providing accessibility */
  outline-color: transparent; /*switch to transparent*/
  outline-width: 2px;
  outline-style: dotted;
  }


/* Disabled checkbox styles */
input[type="checkbox"]:disabled+span {
  cursor: default;
  color: black;
  opacity: 0.5;
}

/* Styles specific to this fiddle that you do not need */
body {
  padding: 1em;
}
h1 {
  font-size: 18px;
}

<h1>
  NOTE: Replace the url for the background-image in CSS with a path to an SVG in your solution or CDN. This one was found from a quick google search for a checkmark icon cdn
</h1>

<label>
  <input type="checkbox">
  <span>Try using tab and space</span>
</label>

<br>

<label>
  <input type="checkbox" checked disabled>
  <span>Disabled Checked Checkbox</span>
</label>

<br>

<label>
  <input type="checkbox" disabled>
  <span>Disabled Checkbox</span>
</label>
<br>

<label>
  <input type="checkbox">
  <span>Normal Checkbox</span>
</label>

<br>

<label>
  <input type="checkbox">
  <span>Another Normal Checkbox</span>
</label>

Aquí hay una solución CSS simple sin ningún código jQuery o JavaScript.

Estoy usando íconos 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;
}

Desde mi búsqueda en Google, esta es la forma más fácil para el estilo de casilla de verificación. Simplemente agregue :aftery :checked:afterCSS basado en 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>

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>

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 peinando labely haciendo 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 checkbox, a pesar de que está oculto, 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 a través de JavaScript porque no creo que las versiones antiguas de Internet Explorer entiendan ::checkeden el checkbox.

¡Ay! Todas estas soluciones me han llevado a la conclusión de que la casilla de verificación HTML apesta si quieres darle un estilo.

Como advertencia, esta no es una implementación de CSS. Solo pensé en compartir la solución que se me ocurrió en caso de que alguien más pueda encontrarla útil.

Utilicé el HTML5 canvas elemento .

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 representarlo correctamente, entonces no hay respaldo. Aunque si esto sigue siendo un problema en 2017 es discutible.

Actualizar

El viejo código me pareció bastante feo, así que decidí volver a escribirlo.

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

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 de verificación está marcada:

my_checkbox.is_checked(); // True if checked, else false

También es importante tener en cuenta que me libré del bucle.

Actualización 2

Algo que no mencioné en la última actualización es que usar el lienzo tiene más ventajas que solo hacer una casilla de verificación que se ve como usted quiera. 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 Checkboxusado en el último fragmento para que sea más genérico, lo que hace posible "extenderlo" con una casilla de verificación que tiene 3 estados. Aquí hay una demostración . Como puede ver, ya tiene más funcionalidad que la casilla de verificación incorporada.

Algo a tener en cuenta al elegir entre JavaScript y CSS.

Código viejo y mal diseñado

Demo de trabajo

Primero, configura 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, idee 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 hacerla interactiva. Afortunadamente, 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 se adaptaba a mis necesidades.

Esta es la forma más simple y puede elegir qué casillas de verificación para dar 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>

No se requiere JavaScript ni jQuery .

Cambie su estilo de casilla de verificación de manera simple.

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;
}

<input type="checkbox" id="option" />
<label for="option"> <span></span> Click me </label>

Aquí está el enlace JsFiddle

Aquí hay una versión solo para CSS / HTML, no se necesita 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 o casillas de verificación individuales, grupos de casillas de verificación y grupos de botones de radio también.

Este html / css le permitirá capturar también el clic en la etiqueta, por lo que la casilla de verificación se marcará y desmarcará incluso si hace clic solo en la etiqueta.

Este tipo de casilla de verificación / botón de opción funciona perfectamente con cualquier forma, sin ningún problema. También se han probado con PHP, ASP.NET (.aspx), JavaServer Faces y ColdFusion .

**Custom checkbox with css**  (WebKit browser solution only Chrome, Safari, Mobile browsers)

    <input type="checkbox" id="cardAccptance" name="cardAccptance" value="Yes">
    <label for="cardAccptance" class="bold"> Save Card for Future Use</label>

    /* The checkbox-cu */

    .checkbox-cu {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 0;
        cursor: pointer;
        font-size: 16px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }


    /* Hide the browser's default checkbox-cu */

    .checkbox-cu input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }


    /* Create a custom checkbox-cu */

    .checkmark {
        position: absolute;
        top: 4px;
        left: 0;
        height: 20px;
        width: 20px;
        background-color: #eee;
        border: 1px solid #999;
        border-radius: 0;
        box-shadow: none;
    }


    /* On mouse-over, add a grey background color */

    .checkbox-cu:hover input~.checkmark {
        background-color: #ccc;
    }


    /* When the checkbox-cu is checked, add a blue background */

    .checkbox-cu input:checked~.checkmark {
        background-color: transparent;
    }


    /* Create the checkmark/indicator (hidden when not checked) */

    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }


    /* Show the checkmark when checked */

    .checkbox-cu input:checked~.checkmark:after {
        display: block;
    }


    /* Style the checkmark/indicator */

    .checkbox-cu .checkmark::after {
        left: 7px;
        top: 3px;
        width: 6px;
        height: 9px;
        border: solid #28a745;
        border-width: 0 2px 2px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        z-index: 100;
    }

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