Hay una manera de hacer esto usando solo CSS. Podemos (ab)usar el elemento 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>

Puede lograr un efecto de casilla de verificación personalizado bastante genial utilizando las nuevas habilidades que vienen con las pseudo clases :after y :before. 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 establecer :after y :before en los elementos de entrada. Lo que desafortunadamente significa que por el momento solo los navegadores webkit son compatibles. FF + IE todavía permitirá que las casillas de verificación funcionen, solo sin estilo, y esto con suerte cambiará 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>

Bono estilo Webkit flipswitch 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, esto es un poco de una actualización.

En primer lugar, hay una serie de enfoques cuando se trata de casillas de verificación de estilo. el principio básico es:

1. Tendrá que ocultar el control de casilla de verificación predeterminado que está diseñado por su navegador, y no se puede sobrescribir de ninguna manera significativa usando CSS.

2. Con el control oculto, usted todavía necesidad de ser capaz de detectar y alternar su estado comprobado

3. El estado marcado de la casilla de verificación tendrá que reflejarse mediante el estilo de un nuevo elemento

La solución (en principio)

Lo anterior se puede lograr por una serie de medios - y a menudo escuchará que usar pseudo-elementos CSS3 es la manera correcta. En realidad, no hay una manera correcta o incorrecta real, depende del enfoque más adecuado para el contexto en el que lo usará. Dicho esto, tengo uno preferido.

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

2. Ocultar la casilla

3. Agregue un nuevo elemento después de la casilla de verificación que pondrá el estilo correspondiente. Debe aparecer después de la casilla de verificación para que pueda seleccionarse usando CSS y estilo dependiendo del estado :checked. CSS no puede seleccionar "al revé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 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 soportan la propiedad content que le permite inyectar iconos unicode que representan cualquier estado. Alternativamente, usted podría usar una fuente de icono de fuente de terceros como font awesome (aunque asegúrese de establecer también el font-family relevante, 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>

Puede estilizar las casillas de verificación con un pequeño truco usando el elemento label un ejemplo 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 a FIDDLE para el código anterior. Tenga en cuenta que algunos CSS no funciona en versiones anteriores de los navegadores, pero estoy seguro de que hay algunos ejemplos de JavaScript de lujo por ahí!

Seguiría el consejo de la respuesta de SW4 - para ocultar la casilla de verificación y cubrirla con span personalizado, sugiriendo este HTML

<label>
  <input type="checkbox">
  <span>send newsletter</span>
</label>

La etiqueta wrap in permite hacer clic en el texto sin la necesidad de vincular el atributo "for-id". Sin embargo,

No lo ocultes usando visibility: hidden o display: none

Funciona haciendo clic o tocando, pero esa es una forma patética de usar las casillas de verificación. Algunas personas todavía utilizan mucho más eficaz tab para mover el foco, espacio a activar, y esconderse con ese método lo desactiva. Si la forma es larga, uno guardará las muñecas de alguien para usar tabindex o accesskey atributos. Y si observa el comportamiento de la casilla de verificación del sistema, hay una sombra decente en hover. La casilla de verificación well styled debe seguir este comportamiento.

Cobberboy's answer recomienda Font Awesome que suele ser mejor que bitmap ya que las fuentes son vectores escalables. Trabajando con el HTML anterior, sugeriría estos CSS reglas:

1. Ocultar casillas de verificación

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

   Utilizo solo negativo z-index ya que mi ejemplo usa la piel de casilla de verificación lo suficientemente grande como para cubrirlo completamente. No recomiendo left: -999px ya que no es reutilizable en todos los diseños. La respuesta de Bushan wagh proporciona una forma a prueba de balas de ocultarlo y convencer al navegador de usar tabindex, por lo que es una buena alternativa. De todos modos, ambos son sólo un truco. El camino correcto hoy es appearance: none, ver Joost's respuesta:

   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. Agregar piel de casilla

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

4. Agregar casilla de verificación piel marcada

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

   \00f046 es Font Awesome check-square-o, que no es el mismo ancho que square-o, que es la razón del estilo de ancho 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 el color gris para la casilla de verificación desactivada

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

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

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>

Pruebe para pasar el ratón sobre las casillas de verificación y usar tab y shift+tab para moverse y espacio para alternar.

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 es necesario agregar html adicional en su página
3. No es necesario cambiar los nombres de las casillas de verificación and id

Simple coloque el CSS fluido en la parte superior de su página y todos los estilos de casillas de verificación cambiarán como esto:

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

Prefiero usar fuentes de iconos (como FontAwesome) ya que es fácil modificar sus colores con CSS y escalan muy bien en dispositivos de alta densidad de píxeles. Así que aquí hay otra variante CSS pura, usando 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 label. Un span adyacente contiene nuestra casilla de verificación caracter.

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) */
}

/*