Estoy tratando de estilo de una casilla de verificación con la siguiente:

HTML:

<input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" />

Pero no se aplica el estilo. La casilla de verificación que todavía muestra su estilo por defecto. ¿Cómo puedo darle el estilo especificado?

InformationsquelleAutor svirk | 2010-11-10

29 Comentarios

  1. 741

    ACTUALIZACIÓN:

    La siguiente respuesta hace referencia al estado de las cosas antes de que la disponibilidad generalizada de CSS 3. En los navegadores modernos (incluyendo Internet Explorer 9 y versiones posteriores) es más sencillo crear casilla de verificación reemplazos con su preferencia de estilo, sin necesidad de utilizar JavaScript.

    Aquí están algunos enlaces útiles:

    Vale la pena señalar que la cuestión fundamental no ha cambiado. Todavía no se puede aplicar estilos (bordes, etc.) directamente a la casilla de verificación del elemento y los estilos afecta a la visualización de la casilla de verificación HTML. Lo que ha cambiado, sin embargo, es que ahora es posible para ocultar la real casilla de verificación y reemplazarlo con un estilo de elemento de su propia, utilizando sólo CSS. En particular, debido a que CSS tiene ahora ampliamente apoyada :checked selector, usted puede hacer su reemplazo reflejar correctamente la comprobación de estado de la caja.


    MAYOR RESPUESTA

    Aquí un artículo útil sobre el estilo de casillas de verificación. Básicamente, que el escritor encontró que varía enormemente de un navegador a otro, y que la mayoría de los navegadores mostrará la casilla de verificación predeterminado no importa cómo sea tu estilo. Así que realmente no hay una manera fácil.

    No es difícil imaginar una solución donde el uso de JavaScript para superponer una imagen en la casilla de verificación y han clics en la imagen la causa real de la casilla de verificación para ser revisados. Los usuarios sin JavaScript sería ver la casilla de verificación predeterminado.

    Editado para añadir: he aquí un buen script que hace esto para usted; se esconde el verdadero elemento casilla de verificación, lo reemplaza con un estilo de span, y redirige los eventos de clic.

    • Esta respuesta se está poniendo viejo! El principal enlace conduce a un sitio de comparación de IE6 y IE7 estilos…
    • Justo punto, y el punto básico no es realmente cierto ya, en los navegadores modernos. He actualizado con algunos de los más nuevos enlaces, pero a la izquierda el original como un recurso para los navegadores más antiguos.
    • Fácil de CSS Casilla de verificación Generador, fue muy fácil y n00b amable. Viene con la interfaz gráfica para la creación personalizada demasiado! Se aprecia bien. 🙂
    • Estoy interesado en la respuesta anterior porque quiero que esta función sea compatible con IE8+ & otros navegadores (chrome, firefox & safari). Sin embargo no puedo encontrar mucha información sobre el plugin te recomendamos ryanfait.com/resources/custom-checkboxes-and-radio-buttons
    • este js del plugin parece bastante bueno. Compatible con IE7+, Chrome, Firefox, Safari & navegadores móviles github.com/arthurgouveia/prettyCheckable
    • tenga en cuenta que prettyCheckable no es «compatible» con esta técnica stackoverflow.com/questions/306252/…
    • La mayoría de estos enlaces llevan a páginas que parecen pensar que una etiqueta debe estar en blanco. Yo recomendaría este codepen: codepen.io/CreativeJuiz/pen/BiHzp en su lugar.
    • Este no es un método muy útil de respuesta – es sólo una lista de artículos, la mayoría de los cuales son de muy vieja ahora.
    • Compruebe esto hacia fuera stackoverflow.com/a/34389136/4947434

  2. 135

    Hay una manera de hacer esto usando solo CSS. Podemos (ab)uso de la label elemento y el estilo que el elemento en su lugar. La advertencia es que esto no va a funcionar para Internet Explorer 8 y versiones inferiores.

    CSS:

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

    HTML:

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

    • Pettersson en este trabajo en IE 8+?
    • esto funcionará para cualquier navegador que soporte la :activada pseudo-clase, que IE8 NO soporta. Usted puede comprobar si esto funciona con selectivizr.com – que añade soporte para :checked y amigos.
    • En otras palabras, IE9 y versiones posteriores admite :activada.
    • Hay un polyfill para IE8 y a continuación: github.com/rdebeasi/checked-polyfill
    • El ployfill enlace que has compartido no está funcionando
    • Es trabajo, pero la primera vez que parpadea. ¿Por qué está sucediendo?
    • Creo oculto inputs nunca tome el foco del teclado, por lo que estos son inalcanzables por el teclado.
    • Actualizado ejemplo de uso de position: relative y un negativo z-index lugar.
    • Excelente trabajo de todo, trabajó como un encanto con un par de mods para mi el diseño. Gracias!
    • mente a un fragmento de su respuesta?

  3. 128

    Puede lograr bastante fresco checkbox personalizado efecto mediante el uso de las nuevas habilidades que vienen con el :after y :before pseudo clases. La ventaja de esto, es: no es necesario agregar nada más a la DOM, sólo el estándar de casillas de verificación.

    Nota: esto sólo funcionará para los navegadores compatibles. Creo que esto está relacionado con el hecho de que algunos navegadores no permiten establecer :after y :before en los elementos de entrada. Que por desgracia significa que por el momento sólo los navegadores WebKit son compatibles. Firefox + Internet Explorer todavía permiten que las casillas de verificación de la función, sólo sin estilo, y esperamos que esto cambie en el futuro (el código no utilizar proveedor prefijos).

    Este es un navegador WebKit solución única (Chrome, Safari, navegadores Móviles)

    Véase El Ejemplo De Violín

    JS:

    $(function() {
      $('input').change(function() {
        $('div').html(Math.random());
      });
    });

    CSS:

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

    HTML:

    <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 de Webkit estilo flipswitch violín

    JS:

    $(function() {
    var f = function() {
    $(this).next().text($(this).is(':checked') ? ':checked' : ':not(:checked)');
    };
    $('input').change(f).trigger('change');
    });

    CSS:

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

    HTML:

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

    • Firefox 33.1/Linux: El violín solo se muestra predeterminada de casillas de verificación. Nada parece diferente.
    • Esto está claramente señalado en el post original. La versión de firefox OS, es irrelevante, no funciona en firefox. «FF + IE todavía permiten que las casillas de verificación de la función, sólo de la onu, de estilo…»
    • Un buen enfoque. Pero no todos los navegadores haciendo bien. Sólo Chrome tiene la mejor salida tal y como yo lo examinó.
    • Muy bonito. Sin embargo… de nuevo es una de IE 5.x enfoque. Webkit sólo. Porque no siempre sigue las reglas… Eso es todo el problema con los navegadores webkit.
    • La mejor solución! +1, Pero no veo la razón para escribir un gran ejemplo. 30 líneas para describir la idea sería suficiente.
    • Tengo el defecto de casillas de verificación en Firefox 58 y IE11 en windows también.
    • En el contrario, tener un detallado ejemplo, es excelente para una calidad de respuesta.

  4. 124

    Antes de comenzar (a partir de enero 2015)

    El original de la pregunta y la respuesta son ahora ~5 años de edad. Como tal, esto es un poco de una actualización.

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

    1. Deberá ocultar el defecto de control de casilla de verificación, que es el estilo de su navegador, y no puede ser reemplazado en forma significativa el uso de CSS.

    2. Con el control oculto, usted todavía tendrá que ser capaz de detectar y cambiar su estado marcado

    3. El estado de activación de la casilla de verificación deberá ser reflejada por el estilo, un nuevo elemento

    La solución (en principio)

    Lo anterior puede lograrse por diversos medios – y usted oirá a menudo usando CSS3 pseudo-elementos es el camino correcto. En realidad, no hay ningún derecho real o de forma incorrecta, esto depende del enfoque más adecuado para el contexto que se esté utilizando en. Dicho esto, tengo una preferida.

    1. Envuelve tu casilla de verificación en un label elemento. Esto significa que incluso cuando está oculto, usted todavía puede cambiar su estado de activación haciendo clic en cualquier lugar dentro de la etiqueta.

    2. Ocultar su casilla de verificación

    3. Añadir un nuevo elemento después de la casilla de verificación que se va a estilo en consecuencia. Debe aparecer después de que la casilla de verificación modo se puede seleccionar mediante el uso de CSS y el estilo depende de la :checked estado. CSS puede seleccionar ‘hacia atrás’.

    La solución (en el código)

    CSS:

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

    HTML:

    <label>
    <input type='checkbox'>
    <span></span>
    Checkbox label text
    </label>

    De refinamiento (usando los iconos)

    Pero hey! Te oigo gritar. ¿Y si quiero mostrar un pequeño tick o una cruz en la casilla? Y no quiero usar imágenes de fondo!

    Bien, aquí es donde CSS3 del pseudo-elementos que pueden entrar en juego. Este apoyo de la content de la propiedad que le permite inyectar Unicode iconos en representación de cualquiera de los estados. Como alternativa, puede utilizar una fuente de terceros icono de fuente, tales como el tipo de fuente impresionante (aunque asegúrese de establecer también el relevante font-family, por ejemplo, a FontAwesome)

    CSS:

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

    HTML:

    <label>
    <input type='checkbox'>
    <span></span>
    Checkbox label text
    </label>

    • Lo que he descrito es EXACTAMENTE lo que yo he descrito.
    • Excepto para: simplificado HTML, simplificado CSS, explicación detallada.
    • Ficha clave no funciona
    • respuesta actualizada, esto fue debido a la utilización de la pantalla:ninguna que no crear una instancia del control en un tabbable manera, he cambiado
    • Yo estaba luchando para encontrar un ejemplo en el que la casilla de verificación que estaba dentro de la etiqueta en lugar de antes/después. Este es un muy bien documentado y explicado solución. Sería genial ver a esta respuesta actualizada de enero de 2016.
    • Todavía no tabbable con display: none.
    • Reemplazar visibility: hidden; con opacity: 0 !important; si usted todavía está teniendo problemas con la tabulación.
    • tenga en cuenta que por la especificación CSS, el uso de !important no es recomendable, especialmente para el código de producción (sin embargo, el mundo real de las necesidades pueden justificar)
    • Sí, me suelen permanecer lejos de !important. Pero parece ser la ÚNICA manera de mantener la tabulación con algunos de estos casilla de verificación de diseños. De hecho, me encontré con que de mirar el código que se usa en algunos de Semántica de la interfaz de usuario de casillas de verificación.
    • Ha sido galardonado con el Caballero invisible/Erudito insignia por Kyle Vassella

  5. 31

    Me gustaría seguir el consejo de SW4 la respuesta – para ocultar la casilla de verificación y cubrirlo con una medida de intervalo, lo que sugiere que este HTML:

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

    La envoltura en la etiqueta cuidadosamente permite hacer clic en el texto sin la necesidad de «para-id» atributo de la vinculación. Sin embargo,

    No ocultarla con visibility: hidden o display: none

    Funciona al hacer clic o tocar, pero que es una mala manera de utilizar las casillas de verificación. Algunas personas todavía utilizan mucho más eficaz Ficha para mover el foco, Espacio para activar, y ocultando con ese método, se deshabilita. Si el formulario es largo, uno va a salvar a alguien de muñecas para uso tabindex o accesskey atributos. Y si usted observa el sistema de casilla de verificación de la conducta, hay una decente sombra en hover. El bien de estilo casilla de verificación debe seguir este comportamiento.

    cobberboy la respuesta recomienda Fuente Impresionante que normalmente es mejor que la de mapa de bits, ya que las fuentes son escalables vectores. Trabajar con el HTML anterior, te sugiero que estas reglas CSS:

    1. Ocultar las casillas de verificación

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

      Yo uso solo negativo z-index desde mi ejemplo se utiliza suficientemente grande casilla de verificación de la piel para cubrirlo completamente. Yo no recomiendo left: -999px ya que no es reutilizable en cada diseño. Bushan wagh la respuesta proporciona una prueba de balas manera de esconderlo y convencer al navegador a usar tabindex, por lo que es una buena alternativa. De todos modos, tanto es sólo un hack. La manera apropiada de hoy es appearance: none, ver Joost la respuesta:

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

      input[type="checkbox"] + span {
      font: 16pt sans-serif;
      color: #000;
      }
    3. Agregar casilla de verificación de la piel

      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 Fuente Impresionante de la square-o, relleno se ajusta para proporcionar incluso el esquema de puntos de enfoque (véase más abajo).

    4. Agregar casilla de verificación marcada de la piel

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

      \00f046 es Fuente Impresionante de la check-square-o, que no es la misma que la anchura de square-o, que es la razón por la anchura del estilo anterior.

    5. Agregar enfoque de esquema

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

      Safari no disponga de esta función (consulte @Jason Sankey comentario del), debe utilizar window.navigator para detectar el navegador y saltar si es Safari.

    6. Set de color gris para personas de movilidad casilla de verificación

      input[type="checkbox"]:disabled + span {
      color: #999;
      }
    7. Juego de hover sombra de la no-discapacitados casilla de verificación

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

    Demo De Violín

    Intentar pasar el ratón sobre las casillas de verificación y uso Ficha y Cambio+Ficha para mover y Espacio para alternar.

    • Upvote para cubrir el problema de enfoque: personalizaciones como este no debería quitar la funcionalidad básica. Nota a pesar de que Safari no dar el foco del teclado a casillas de verificación (incluso los de fábrica), que me confundió momentáneamente la hora de implantar una solución que incluye el manejo de enfoque.
    • ìt parece las casillas de verificación en el fragmento de código no están trabajando más? En las ventanas de chrome 10
    • alguien editado mi respuesta y se añade el fragmento roto. Acabo de probar la demo de Violín en donde trabaja.
    • Bonita respuesta. Proporcionan la base para que mi solución – he utilizado la etiqueta existente después de la entrada en donde usted ha utilizado un extra de span y me sale Edge & FF apoyo.
  6. 29

    Usted puede estilo de casillas con un poco de engaño mediante la label elemento un ejemplo es el siguiente:

    CSS:

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

    HTML:

    <div class="checkbox">
    <input id="checkbox1" type="checkbox" value="1" />
    <label for="checkbox1"></label>
    </div>

    Y un El VIOLÍN para el código anterior. Tenga en cuenta que algunos de CSS no funciona en versiones antiguas de los navegadores, pero estoy seguro de que hay algún capricho JavaScript ejemplos por ahí!

    • Se ve bien, es una .. interruptor.
  7. 24

    Simple de implementar y fácil de personalizar la solución

    Después de mucho buscar y probar llegué a esta solución que es fácil de implementar y fácil de personalizar. En esta solución:

    1. Usted no necesita externo de las bibliotecas y los archivos
    2. No es necesario agregar
      extra HTML en su página
    3. Usted no necesita cambiar de casilla de verificación de los nombres de
      y el id de la

    Simple poner el fluir de CSS en la parte superior de la página y todas las casillas de verificación estilo va a cambiar, como este:

    Cómo el estilo de una casilla de verificación mediante el uso de CSS

    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;
    }
    • Sencillo es mejor!
    • Esta es una gran respuesta, simplemente funciona sin necesidad de nada adicional
    • Buena y muy simple
    • Esto no parece funcionar en IE
    • Solución agradable. Pero yo no veo que funcione en Firefox, IE o Borde (no hay ninguna casilla de verificación)
  8. 17

    Puede evitar añadiendo más marcado. Esto funciona en todas partes, excepto internet explorer para Escritorio (pero funciona en IE y Windows Phone de Microsoft Borde) a través de la configuración de CSS appearance:

    CSS:

    input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Styling checkbox */
    width: 16px;
    height: 16px;
    background-color: red;
    }
    input[type="checkbox"]:checked {
    background-color: green;
    }

    HTML:

    <input type="checkbox" />

    • Me gusta este enfoque es un poco chapucero como usted nunca debe utilizar realmente aparición en css pero es mucho más limpio que algunas de las otras respuestas utilizando el antes y el después. Y para algo como esto me siento JavaScript es completa exageración.
  9. 16

    Yo prefiero usar el icono de fuentes (tales como FontAwesome), ya que es fácil de modificar sus colores con CSS, y que escala muy bien en píxeles alta densidad de dispositivos. Así que aquí está otro puro CSS variante, usando técnicas similares a las anteriores.

    (A continuación se muestra una imagen estática, así que usted puede visualizar el resultado; ver el JSFiddle para una versión interactiva.)

    Cómo el estilo de una casilla de verificación mediante el uso de CSS

    Como con otras soluciones, se utiliza el label elemento. De un lado span tiene nuestra casilla de verificación de caracteres.

    CSS:

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

    HTML:

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

    • ….lo que usted describe es el mismo que las anteriores respuestas de Bhushan wagh, Jake, Jonathan Hodgson y Blake 😉
    • He hecho referencia a ese hecho, excepto que esta respuesta se utiliza el icono de fuentes (que ninguna de las respuestas anteriores había). El primer párrafo hace que bastante claro.
    • Usted necesita para reemplazar font-family: FontAwesome; con font-family: 'Font Awesome\ 5 Free';, y actualizar el contenido unicode si quieres hacerlo funcionar en la nueva versión.
  10. 12

    Recientemente he encontrado una bastante interesante solución para el problema.

    Usted podría utilizar appearance: none; para desactivar la casilla de verificación del estilo predeterminado y, a continuación, escribe tu propia sobre él como se describe aquí (Ejemplo 4).

    Ejemplo de violín

    CSS:

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

    HTML:

    <input type="checkbox">

    Lamentablemente navegador soporte es muy malo para el appearance opción. Desde mi muy personal de pruebas sólo tengo Opera y Chrome funciona correctamente. Pero esta sería la forma de ir de lo simple, cuando mejor apoyo viene o sólo desea usar Chrome/Opera.

    «¿Puedo usar?» enlace

  11. 6

    Mi solución

    CSS:

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

    HTML:

    <input type="checkbox"><br>
    <input type="checkbox" checked><br>
    <input type="checkbox" disabled><br>
    <input type="checkbox" disabled checked><br>

    • Si alguien pudiera asesoramiento razón por la que mi texto no está alineado después, me encantaría saber! CSS principiante aquí.
  12. 6

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

    Estoy usando FontAwseome iconos pero usted puede utilizar 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;
    }
    • A diferencia de la mayoría de las otras respuestas, este no requieren la creación de adicionales label o span elementos. Simplemente funciona!
    • Podrías mostrar un ejemplo, o una demo, o al menos la parte de HTML, con lo que este código CSS está trabajando? @aWebDeveloper
    • hacer inane ediciones golpear una respuesta o la pregunta de la página de inicio está en contra de las reglas.
    • yo no lo entiendo. qué mal he hecho yo
    • Edita una vieja respuesta en una sola pregunta, que golpes en la página principal y proporciona un enlace directo a tu respuesta. Esto está bien si usted tiene información pertinente agregar o cambiar en una respuesta. Todo lo que hizo fue integrar una de sus frases en una cita de bloque, que no es útil para nadie.
    • oh…. @TylerH yo nunca supe si
    • Esto sólo funciona en Chrome.
    • debe trabajar @VadimOvchinnikov… nada aquí es chrome específicos
    • pseudoselectors para input sólo funcionan en Chrome. Si usted no está de acuerdo puede por favor compartir simple demo es decir, en jsfiddle que no sólo funciona en Chrome? Mira este jsfiddle.net/7e08adkj verás «ABC» sólo en Chrome.

  13. 6

    De mi googlear, esta es la forma más fácil para la casilla de verificación estilo. Sólo añadir :after y :checked:after CSS en función de su diseño.

    CSS:

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

    HTML:

    <input type="checkbox"> <span>Select Text</span>

    • Muy fresco solución para los navegadores que soportan los pseudo-elementos. 🙂
  14. 5

    Con puro CSS, nada de lujo con :before y :after, no se transforma, puede desactivar la apariencia predeterminada y, a continuación, el estilo con una línea de fondo de la imagen, como en el siguiente ejemplo. Esto funciona en Chrome, Firefox, Safari, y ahora Borde (Cromo Borde).

    CSS:

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

    HTML:

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

  15. 4

    Un sencillo y ligero, plantilla:

    CSS:

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

    HTML:

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

    • Pseudoelements para inputs sólo se admiten en Chrome, el código no funciona igual en todos los navegadores.
  16. 4

    Creo que la manera más sencilla de hacerlo es por el estilo de un label y hacer el checkbox invisible.

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

    La checkbox, aunque está oculto, todavía va a ser accesible, y su valor será enviado cuando el formulario es enviado. Para los navegadores antiguos que usted podría tener que cambiar la clase de la label para comprobar usando JavaScript porque no creo que las versiones antiguas de Internet el Explorador de entender ::checked en el checkbox.

    • La diferencia entre tu respuesta y la mía es ¿qué es exactamente?
    • la suya es la correcta, ::activada está mal (incluso he intentado sólo en caso de que también permite) 😉
    • Esta es una mala respuesta. (a) ::checked está mal—se debe :checked. (b) checkbox está mal—se debe [type=checkbox]
  17. 4

    ¡Caramba! Todas estas soluciones que me han llevado a la conclusión de que la casilla de verificación HTML especie de chupa si usted desea que el estilo.

    Como una advertencia, no se trata de una implementación de CSS. Yo sólo pensé en compartir la solución que se me ocurrió en el caso de que alguien más podría encontrar útil.


    He utilizado el HTML5 canvas elemento.

    La ventaja de esto es que usted no tiene que usar imágenes externas y, probablemente, puede ahorrar algo de ancho de banda.

    La desventaja es que si un navegador por alguna razón no puede procesar correctamente, entonces no hay ningún retroceso. Aunque si esto sigue siendo un problema en el 2017 es discutible.

    Actualización

    Me encontré con el viejo código bastante feo, así que me decidí a darle una reescritura.

    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í un demo.

    La nueva versión utiliza prototipos y diferencial de la herencia para crear un sistema eficiente para la creación de casillas de verificación. Para crear una casilla de verificación:

    var my_checkbox = Checkbox.create();

    Inmediatamente agregar la casilla de verificación de la DOM y gancho de seguridad de los eventos. Para consultar si una casilla está marcada:

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

    También es importante notar que me deshice de el bucle.

    Actualización 2

    Algo que me olvidé de mencionar en la última actualización, es que con el lienzo tiene más ventajas que la simple realización de una casilla de verificación que se ve sin embargo que usted quiere que se vea. También podría crear multi-estado casillas de verificación, si usted quería.

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

    He modificado ligeramente la Checkbox utilizado en el último fragmento de código para que sea más genérico, que permite «extender», con una casilla de verificación que tiene 3 estados. Aquí una demo. Como se puede ver, ya tiene más funcionalidad que el construido-en la casilla de verificación.

    Algo a tener en cuenta a la hora de elegir entre JavaScript y CSS.

    Viejo, mal diseñada código

    Demo

    Primero, establecer 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'));

    Siguiente, idear una manera de tener el lienzo de la actualización de sí mismo.

    (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 para hacerla interactiva. Por suerte, es bastante simple:

    canvas.onclick = function(){
    checked = !checked;
    }

    Esto es donde usted podría tener problemas en IE, debido a sus extrañas modelo de manejo de eventos en JavaScript.


    Espero que esto ayude a alguien; es definitivamente más adecuado a mis necesidades.

    • Tenga en cuenta que el Lienzo de implantación, como una emulación de casillas de verificación, permite una mayor funcionalidad que el construido-en las casillas de verificación. Por ejemplo, fantasía cosas como «multi-estado» de casillas de verificación (es decir,unchecked (e.g. unchecked -> checked -> "kinda" checked -> unchecked; los estados podrían representar «explícito false», «explícito verdadero», «use default», por ejemplo). Estoy pensando en añadir un ejemplo para la respuesta.
    • Terrible idea, en mi opinión.
    • por favor, elaborar
    • Por qué reinventar la rueda?
    • por qué no reinventar la rueda? NIH no es siempre una mala cosa, especialmente cuando se ofrece ventajas que de otro modo sería imposible o estúpidamente complicado de implementar con la tecnología existente. Así que es una cuestión de si estás dispuesto a lidiar con la incorporada en las casillas de verificación. Y si estoy queriendo tema que se mezclan con el lenguaje visual de mi sitio web o de la aplicación, deseo de control total. Así que hasta que alguien hace un autónomo biblioteca de interfaz de usuario que es ligero y fácil de usar, yo personalmente prefiero que mis ruedas que se inventó aquí. Alguien más puede que no, pero eso no invalida mi respuesta.
    • …o necesariamente la idea terrible, en mi opinión (límite de caracteres)

  18. 3

    Sin JavaScript o jQuery requiere.

    Cambiar su estilo de checkbox manera sencilla.

    HTML

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

    CSS

    input[type="checkbox"] {
    display: none;
    border: none !important;
    box-shadow: none !important;
    }
    input[type="checkbox"] + label span {
    background: url(http://imgh.us/uncheck.png);
    width: 49px;
    height: 49px;
    display: inline-block;
    vertical-align: middle;
    }
    input[type="checkbox"]:checked + label span {
    background: url(http://imgh.us/check_2.png);
    width: 49px;
    height: 49px;
    vertical-align: middle;
    }

    Aquí es JsFiddle enlace: https://jsfiddle.net/05y2bge3/

  19. 3

    Modificar el estilo de checkbox solo con CSS3, no requiere de ningún JS&HTML manipulación.

    CSS:

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

    HTML:

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

  20. 2

    Esta es la manera más simple y usted puede elegir las 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>
  21. 2

    Aquí es un CSS/HTML-sólo versión, no jQuery o JavaScript necesarios en absoluto, Sencilla y limpia de HTML y realmente sencillo y breve de CSS.

    Aquí es el JSFiddle

    http://jsfiddle.net/v71kn3pr/

    Aquí está el código 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;
    }

    Este puede ser adaptado para ser capaz de tener radio individuales o las casillas de verificación, grooups de casillas de verificación y los grupos de botones de radio así.

    Este html/css, te permitirá capturar haga clic en la etiqueta, de modo que la casilla de verificación será facturado y sin incluso si usted haga clic en la etiqueta.

    Este tipo de casilla de verificación/botón de radio funciona perfectamente con cualquier forma, no hay problema en absoluto. Han sido probados usando PHP, ASP.NET (.aspx), JavaServer Faces, y ColdFusion demasiado.

  22. 1

    Advertencia: el siguiente fue cierto en el momento de la escritura, pero en el mientras tanto, las cosas han progresado.

    AFAIK navegadores modernos mostrar casillas de verificación mediante el nativo de control del sistema operativo, así que no hay manera de que el estilo de ellos.

    • Esto puede haber sido cierto en ’10, pero ahora no, se debe eliminar esta respuesta.
    • Su verdad todavía – todos los navegadores modernos mostrar casillas de verificación usar nativos del sistema operativo de control. Es sólo que hay algunas muy buenas técnicas para evitar esta limitación.
    • Sí, me refería a la «no hay manera de que estilo de» parte ^^
  23. 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);
    }
    • Una explicación podría estar en orden.
  24. 1

    No, usted todavía no puede estilo de la casilla de verificación sí, pero yo (por fin) descubrió cómo el estilo de una ilusión mientras mantener la funcionalidad de hacer clic en una casilla de verificación. Esto significa que usted puede cambiar incluso si el cursor no está perfectamente aún sin correr el riesgo de seleccionar el texto o la activación de la arrastrar-y-gota!

    Esta solución probablemente también se adapta a los botones de la radio.

    Las siguientes obras en Internet Explorer 9, Firefox y Chrome 30.0 40.0.2214.91 y es sólo un ejemplo básico. Todavía se puede utilizar en combinación con las imágenes de fondo y los pseudo-elementos.

    http://jsfiddle.net/o0xo13yL/1/

    label {
    display: inline-block;
    position: relative; /* Needed for checkbox absolute positioning */
    background-color: #eee;
    padding: .5rem;
    border: 1px solid #000;
    border-radius: .375rem;
    font-family: "Courier New";
    font-size: 1rem;
    line-height: 1rem;
    }
    label > input[type="checkbox"] {
    display: block;
    position: absolute; /* Remove it from the flow */
    width: 100%;
    height: 100%;
    margin: -.5rem; /* Negative the padding of label to cover the "button" */
    cursor: pointer;
    opacity: 0; /* Make it transparent */
    z-index: 666; /* Place it on top of everything else */
    }
    label > input[type="checkbox"] + span {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 1px solid #000;
    margin-right: .5rem;
    }
    label > input[type="checkbox"]:checked + span {
    background-color: #666;
    }
    <label>
    <input type="checkbox" />
    <span>&nbsp;</span>Label text
    </label>
  25. 1

    Desde navegadores como Borde y Firefox no apoyo :antes :después en la casilla de entrada etiquetas, aquí es una alternativa puramente con HTML y CSS. Por supuesto, usted debe editar el CSS de acuerdo a sus necesidades.

    Hacer que el código HTML para la casilla de verificación como este:

    <div class='custom-checkbox'>
    <input type='checkbox' />
    <label>
    <span></span>
    Checkbox label
    </label>
    </div>

    Aplicar este estilo para la casilla de verificación para cambiar el color de la etiqueta

    <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>
  26. 1

    Parece que usted puede cambiar el color de la casilla en escala de grises mediante el uso de CSS sólo.

    Los siguientes convierte las casillas de verificación de negro a gris (que era lo que yo quería):

    input[type="checkbox"] {
    opacity: .5;
    }
    • esto hace que la frontera de la luz también. también, usted no puede ver realmente el cheque si usted comprobar.
  27. 0

    Usted puede simplemente utilizar appearance: none en los navegadores modernos, por lo que no hay ningún valor predeterminado de estilo y de todos los estilos se aplican 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;
    }
  28. -1

    Puede utilizar iCheck. Es personalizado a las casillas de verificación y botones de radio para jQuery & Zepto, y tal vez pueda ayudarte.

    Asegúrese de jQuery v1.7+ se carga antes de que el icheck.js

    1. Elegir un esquema de color, hay 10 diferentes estilos disponibles:
      • Negro — minimal.css
      • Rojo — rojo.css
      • Verde — verde.css
      • De azul — azul.css
      • Aero aero.css
      • Gris — gris.css
      • Naranja — naranja.css
      • Amarillo — amarillo.css
      • Rosa — rosa.css
      • Morado — púrpura.css
    2. Copia /skins/mínima/carpeta y icheck.js archivo a su sitio web.
    3. Antes de insertar en el HTML (reemplazar su ruta y de colores):

      <link href="your-path/minimal/color-scheme.css" rel="stylesheet">
      <script src="your-path/icheck.js"></script>

      Ejemplo para el esquema de color Rojo:

      <link href="your-path/minimal/red.css" rel="stylesheet">
      <script src="your-path/icheck.js"></script>
    4. Agregar algunas casillas de verificación y botones de opción HTML:

      <input type="checkbox">
      <input type="checkbox" checked>
      <input type="radio" name="iCheck">
      <input type="radio" name="iCheck" checked>
    5. Añadir JavaScript a tu HTML para lanzar iCheck plugin:

      <script>
      $(document).ready(function(){
      $('input').iCheck({
      checkboxClass: 'icheckbox_minimal',
      radioClass: 'iradio_minimal',
      increaseArea: '20%' //Optional
      });
      });
      </script>
    6. Diferentes de esquemas de color negro en el uso de este código (por ejemplo, Rojo):

      <script>
      $(document).ready(function(){
      $('input').iCheck({
      checkboxClass: 'icheckbox_minimal-red',
      radioClass: 'iradio_minimal-red',
      increaseArea: '20%' //Optional
      });
      });
      </script>
    7. Hecho

  29. -11

    Solución rápida para agregar el icono delante del texto:

    < asp:CheckBox... Text="< img src='/link/to/img.png' />My Text" />
    • asp:Casilla de verificación? ¿Qué es lo que en CSS / HTML?
    • CSS y HTML es: <i dont=’entender’ el=’pregunta’/>

Dejar respuesta

Please enter your comment!
Please enter your name here