Cómo diseñar una casilla de verificación usando CSS

831

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?

svirk
fuente
1
Creo que está buscando algo como esto: asimishaq.com/myfiles/image-checkbox Vea esta publicación: stackoverflow.com/questions/16352864/…
asim-ishaq
1
El enlace está en el comentario anterior. de todos modos: blog.felixhagspiel.de/index.php/posts/custom-inputs
Felix Hagspiel
1
Guau. Mirando todas estas respuestas, solo tengo que decir: Todo este trabajo solo para poner una casilla de verificación con estilo en la pantalla
Michael

Respuestas:

784

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:

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.

Jacob Mattison
fuente
34
¡Esta respuesta se está haciendo vieja! El enlace principal conduce a un sitio que compara los estilos IE6 e IE7 ...
Jonatan Littke
77
Punto justo, y el punto básico ya no es realmente cierto, en los navegadores modernos. He actualizado con algunos enlaces más nuevos, pero dejé el original como un recurso para navegadores antiguos.
Jacob Mattison
3
Easy CSS Checkbox Generator , fue realmente fácil y amigable con n00b. ¡Viene con GUI para creación personalizada también! Bien apreciado. :)
CᴴᴀZ
Estoy interesado en la respuesta anterior porque quiero que esta función sea compatible con IE8 + y otros navegadores (Chrome, Firefox y Safari). Sin embargo, no puedo encontrar muchos comentarios sobre el complemento que recomienda ryanfait.com/resources/custom-checkboxes-and-radio-buttons
Adrien Be
2
Esta no es una respuesta muy útil, es solo una lista de artículos, la mayoría de los cuales son muy antiguos ahora.
Steve Bennett
141

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>

Blake Pettersson
fuente
@GandalfStormCrow esto funcionará para cualquier navegador que admita la pseudoclase marcada, que IE8 NO admite. Puede verificar si esto funciona con selectivizr.com , que agrega soporte para: verificado y amigos.
Blake Pettersson
En otras palabras, IE9 y versiones posteriores son compatibles: marcado.
Blake Pettersson
1
Hay un polyfill para IE8 e inferior: github.com/rdebeasi/checked-polyfill
Tim
Está funcionando, pero la primera vez parpadea. Por que esta sucediendo?
technophyle
Creo que los ocultos inputnunca toman el foco del teclado, por lo que estos no se pueden alcanzar con el teclado.
Sam
139

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>

Josh Mc
fuente
99
Firefox 33.1 / Linux: el violín muestra solo casillas de verificación predeterminadas. Nada se ve diferente.
robsch
1
@robsch Esto se señala claramente en la publicación original. La versión de firefox u OS es irrelevante, no funciona en firefox. "FF + IE seguirá permitiendo que las casillas de verificación funcionen, simplemente sin estilo ..."
Josh Mc
Un buen acercamiento. Pero no todos los navegadores lo hacen bien. Solo Chrome tiene la mejor salida, por lo que he examinado.
EA
Muy agradable. Sin embargo ... Es de nuevo un enfoque de IE 5.x. Solo kit web. Porque no siempre sigue las reglas ... Ese es todo el problema con los navegadores webkit.
Alex
1
¡Mejor solución! +1 Pero no veo la razón para escribir un ejemplo tan grande. 30 líneas para describir la idea serían suficientes.
Andrii Bogachenko
136

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)

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>

SW4
fuente
14
Excepto por: HTML simplificado, CSS simplificado, explicación detallada.
SW4
44
@AnthonyHayward: respuesta actualizada, esto se debió al uso de display: ninguno que no instancia el control de forma tabulable, he cambiado
SW4
1
Estaba luchando por encontrar un ejemplo en el que la casilla de verificación estuviera dentro de la etiqueta en lugar de antes / después. Esta es una solución muy bien documentada y explicada. Sería genial ver esta respuesta actualizada para enero de 2016.
Clarus Dignus
1
Todavía no se puede tabular con display: none.
Sam
2
Reemplace visibility: hidden;con opacity: 0 !important;si todavía tiene problemas con las pestañas.
jabacchetta
40

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.

Jan Turoň
fuente
3
Votación a favor para cubrir el tema central: personalizaciones como esta no deberían eliminar la funcionalidad básica. Sin embargo, tenga en cuenta que Safari no da el foco del teclado a las casillas de verificación (incluso las predeterminadas), eso me confundió momentáneamente al implementar una solución que incluía el manejo del foco.
Jason Sankey
¿ Parece que las casillas de verificación en el fragmento ya no funcionan? En Windows 10 cromado
Félix Gagnon-Grenier
1
Buena respuesta. Proporcioné la base para mi solución: utilicé la etiqueta existente después de la entrada donde usó un espacio adicional y obtuve soporte de Edge & FF.
Jono
2
La mayoría de estas respuestas ignoran la accesibilidad. Me encanta que esta respuesta la mantenga intacta.
maxshuty
1
@maxshuty También me gusta su enfoque: cuando alguien crea una biblioteca, a menudo es solo una confesión de que no puede codificar en el idioma nativo de su elección. En mi humilde opinión FontAwesome se equivocó con su plan gratuito usando javascript para cargar la fuente, pero todavía me gustan, ya que permanecen de código abierto y con licencia gratuita. Por lo general, termino el subconjunto de forja de fuentes de iconos gratuitos que necesito en un proyecto particular (generalmente un máximo de 5 KB). Con mucho gusto pagaría si me ahorraran el esfuerzo, pero no los locos 99 dólares por año que proponen en su plan Pro.
Jan Turoň
30

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!

Jake
fuente
28

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í:

Ingrese la descripción de la imagen aquí

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;
}
Mohamed Nor
fuente
1
Más simple es mejor!
Adrian Moisa
Esta es una gran respuesta, simplemente funciona sin necesidad de nada adicional
HeavyHead
Buena y muy simple
khalidh
Buena solución Pero no lo veo funcionando en Firefox, IE o Edge (no hay casilla de verificación)
Jono
20

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

Vadim Ovchinnikov
fuente
3
Me gusta este enfoque: es un poco hacky ya que nunca deberías usar realmente la apariencia en CSS, pero es mucho más limpio que algunas de las otras respuestas que usan antes y después. Y para algo como esto, siento que JavaScript es una exageración total.
Sprose
18

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

Ejemplo de casilla de verificación

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.

cobberboy
fuente
.... lo que describió es lo mismo que las respuestas anteriores de Bhushan wagh, Jake, Jonathan Hodgson y Blake;)
SW4
77
@ SW4 He hecho referencia a ese hecho, excepto que esta respuesta usa fuentes de iconos (que ninguna de las respuestas anteriores tenía). El primer párrafo lo deja bastante claro.
cobberboy
Es necesario sustituir font-family: FontAwesome;con font-family: 'Font Awesome\ 5 Free';, y actualizar el contenido Unicode si desea hacer que funcione en la nueva versión.
SuN
12

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

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

Joost
fuente
De hecho, appearancees justo lo que necesitamos para esto; solo tenga en cuenta que "no es estándar y no está en una pista estándar" .
Sam
12

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>

Volomike
fuente
1
¡Si! Solo uno que sea realmente decente.
Odinho - Velmont
10

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>

agirault
fuente
Si alguien pudiera aconsejar por qué mi texto no está alineado después, ¡me encantaría saberlo! CSS principiante aquí.
agirault
8

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;
}
collimarco
fuente
1
Este es un ejemplo particularmente minimalista que funcionó para mi caso, ¡gracias!
Jason R Stevens CFA
8

¿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 :

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>

maxshuty
fuente
También agregué mi propia respuesta aquí , espero que ayude a alguien. Utilicé el tema en el mío. :) Esperemos que alguien lo vea.
Sr. Polywhirl
6

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;
}
aWebDeveloper
fuente
1
A diferencia de la mayoría de las otras respuestas, esta no requiere la creación de elementos labelo spanelementos adicionales . ¡Simplemente funciona!
KurtPreston
¿Podría mostrar un ejemplo o una demostración, o al menos la parte HTML, con la que funciona este código CSS? @aWebDeveloper
Sándor Zuboly
@aWebDeveloper hacer ediciones inútiles para enviar una respuesta o pregunta a la página de inicio está en contra de las reglas.
TylerH
@aWebDeveloper Editó una respuesta anterior en una pregunta inactiva, que la coloca en la primera página y proporciona un enlace directo a su respuesta. Esto está bien si tiene información pertinente para agregar o cambiar en una respuesta. Todo lo que hizo fue incrustar una de sus oraciones en un bloque de comillas, lo cual no es útil para nadie.
TylerH
debería funcionar @VadimOvchinnikov ... nada aquí es específico de Chrome
aWebDeveloper
6

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>

Mahfuzur Rahman
fuente
Solución muy interesante para navegadores que admiten pseudoelementos. :)
Jean-François Beauchamp
6

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>

BEJGAM SHIVA PRASAD
fuente
@VadimOvchinnikov Tenemos una solución que requiere seguir alguna estructura html ... stackoverflow.com/questions/23305780/…
BEJGAM SHIVA PRASAD
4

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/

javad shariaty
fuente
1
Los pseudoelementos para inputs solo son compatibles con Chrome, su código no funciona igual en todos los navegadores.
Vadim Ovchinnikov
4

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.

Jonathan Hodgson
fuente
44
La diferencia entre tu respuesta y la mía es, ¿qué es exactamente?
Blake Pettersson
@BlakePettersson, el tuyo es correcto, :: verificado es simplemente incorrecto (incluso lo intenté en caso de que también esté permitido);)
especialmente
77
Esta es una mala respuesta. (a) ::checkedestá mal, debería estarlo :checked. (b) checkboxestá mal, debería estarlo[type=checkbox]
Chris Morgan
4

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

Braden Best
fuente
Tenga en cuenta que la implementación de Canvas, como una emulación de casillas de verificación, permite más funcionalidad que las casillas de verificación integradas. Por ejemplo, cosas elegantes como casillas de verificación "multiestado" (es decir unchecked (e.g. unchecked -> checked -> "kinda" checked -> unchecked, los estados podrían representar "explícito falso", "explícito verdadero", "uso predeterminado", por ejemplo). Estoy considerando agregar un ejemplo a la respuesta.
Braden Best
Terrible idea en mi opinión.
@Neil, por favor explique
Braden Best
¿Por qué reinventar la rueda?
@Neil, ¿por qué no reinventar la rueda? NIH no siempre es algo malo, especialmente cuando ofrece ventajas que de otro modo serían imposibles o estúpidamente complicadas de implementar con la tecnología existente. Entonces, se trata de si está dispuesto a lidiar con las casillas de verificación incorporadas. Y si quiero que el tema se mezcle con el lenguaje visual de mi sitio web o aplicación, quiero un control total. Entonces, hasta que alguien haga una biblioteca de interfaz de usuario independiente que sea liviana y fácil de usar, personalmente prefiero que mis ruedas se inventen aquí. Es posible que alguien más no lo haga, pero eso no invalida mi respuesta.
Braden Mejor
3

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>
Ali Gonabadi
fuente
3

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

Apreciar
fuente
La casilla de verificación no aparece porque se basa en enlaces externos a archivos de imagen imgh.us/uncheck.png e imgh.us/check_2.png que ya no están disponibles en línea.
jkdev
2

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 .

Alano
fuente
2
**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;
    }
Sonu Nagar
fuente
1
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);
}
Bhushan wagh
fuente
Una explicación estaría en orden.
Peter Mortensen
1

No, aún no puede diseñar la casilla de verificación en sí, 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 arriesgarse a seleccionar texto o activar arrastrar y soltar!

Esta solución probablemente también se ajuste a los botones de opción.

Lo siguiente funciona en Internet Explorer 9, Firefox 30.0 y Chrome 40.0.2214.91 y es solo un ejemplo básico. Todavía puede usarlo en combinación con imágenes de fondo y pseudoelementos.

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>
LGT
fuente
1

Dado que los navegadores como Edge y Firefox no admiten: antes: después en las etiquetas de entrada de la casilla de verificación, aquí hay una alternativa puramente con HTML y CSS. Por supuesto, debe editar CSS de acuerdo con sus requisitos.

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 a 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>
Muhammad Usman
fuente
1

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 aproximadamente lo que quería):

input[type="checkbox"] {
    opacity: .5;
}
Ellis
fuente
esto también hace que la frontera se ilumine. Además, realmente no puede ver el cheque si lo verifica.
Rachel S
1

Implementación SCSS / SASS

Un enfoque más moderno.

Para aquellos que usan SCSS (o se convierten fácilmente a SASS), lo siguiente será útil. Efectivamente, haga un elemento al lado de la casilla de verificación, que es el que va a diseñar. Cuando se hace clic en la casilla de verificación, el CSS cambia el estilo del elemento hermano (a su nuevo estilo marcado). El código está abajo:

label.checkbox {
  input[type="checkbox"] {
    visibility: hidden;
    display: block;
    height: 0;
    width: 0;
    position: absolute;
    overflow: hidden;

    &:checked + span {
      background: $accent;
    }
  }

  span {
    cursor: pointer;
    height: 15px;
    width: 15px;
    border: 1px solid $accent;
    border-radius: 2px;
    display: inline-block;
    transition: all 0.2s $interpol;
  }
}
<label class="checkbox">
    <input type="checkbox" />
    <span></span>
    Label text
</label>

aabbccsmith
fuente
0

Advertencia : lo siguiente era cierto al momento de escribir, pero mientras tanto las cosas han progresado.

Los navegadores modernos AFAIK muestran casillas de verificación utilizando el control nativo del sistema operativo, por lo que no hay forma de diseñarlos.

Joril
fuente
30
Puede haber sido cierto en el '10, pero no ahora, debería eliminar esta respuesta.
Michał K
3
Todavía es cierto: todos los navegadores modernos muestran casillas de verificación que utilizan el control nativo del sistema operativo. Es solo que hay algunas técnicas nuevas y geniales para evitar esta limitación.
Gal
Sí, me refería a la parte de "no hay forma de
diseñarlos