Estilo de entrada de casilla de verificación CSS

Cualquier estilo para inputafecta a cada elemento de entrada. ¿Hay alguna manera de especificar el estilo para solicitar solo casillas de verificación sin aplicar una clase a cada elemento de casilla de verificación?

Con CSS 2 puedes hacer esto:

input[type='checkbox'] { ... }

Esto debería ser bastante ampliamente soportado por ahora. Ver soporte para navegadores

Creo mi propia solución sin etiqueta

input[type=checkbox] {
         position: relative;
	       cursor: pointer;
    }
    input[type=checkbox]:before {
         content: "";
         display: block;
         position: absolute;
         width: 16px;
         height: 16px;
         top: 0;
         left: 0;
         border: 2px solid #555555;
         border-radius: 3px;
         background-color: white;
}
    input[type=checkbox]:checked:after {
         content: "";
         display: block;
         width: 5px;
         height: 10px;
         border: solid black;
         border-width: 0 2px 2px 0;
         -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
         position: absolute;
         top: 2px;
         left: 6px;
}

<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">

input[type=checkbox] {
         position: relative;
	       cursor: pointer;
    }
    input[type=checkbox]:before {
         content: "";
         display: block;
         position: absolute;
         width: 20px;
         height: 20px;
         top: 0;
         left: 0;
         background-color:#e9e9e9;
}
input[type=checkbox]:checked:before {
         content: "";
         display: block;
         position: absolute;
         width: 20px;
         height: 20px;
         top: 0;
         left: 0;
         background-color:#1E80EF;
}
    input[type=checkbox]:checked:after {
         content: "";
         display: block;
         width: 5px;
         height: 10px;
         border: solid white;
         border-width: 0 2px 2px 0;
         -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
         position: absolute;
         top: 2px;
         left: 6px;
}

<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">

Algo que descubrí recientemente para diseñar botones de radio y casillas de verificación. Antes, tenía que usar jQuery y otras cosas. Pero esto es estúpidamente simple.

input[type=radio] {
    padding-left:5px;
    padding-right:5px;
    border-radius:15px;

    -webkit-appearance:button;

    border: double 2px #00F;

    background-color:#0b0095;
    color:#FFF;
    white-space: nowrap;
    overflow:hidden;

    width:15px;
    height:15px;
}

input[type=radio]:checked {
    background-color:#000;
    border-left-color:#06F;
    border-right-color:#06F;
}

input[type=radio]:hover {
    box-shadow:0px 0px 10px #1300ff;
}

Puede hacer lo mismo para una casilla de verificación, obviamente cambie input[type=radio]a input[type=checkbox]y cambie border-radius:15px;aborder-radius:4px; .

Espero que esto sea algo útil para ti.

Las clases también funcionan bien, como:

<style>
  form input .checkbox
  {
    /* your checkbox styling */
  }
</style>

<form>
  <input class="checkbox" type="checkbox" />
</form>

Puede aplicar solo a ciertos atributos haciendo:

input[type="checkbox"] {...}

Lo explica aquí .

input[type="checkbox"] {
 /* your style */
}

Pero esto solo funcionará para los navegadores, excepto IE7 y versiones inferiores, para aquellos que tendrá que usar una clase.

Trident proporciona el ::-ms-checkpseudo-elemento para la casilla de verificación y los controles de los botones de opción. Por ejemplo:

<input type="checkbox">
<input type="radio">

::-ms-check {
    color: red;
    background: black;
    padding: 1em;
}

Esto se muestra como sigue en IE10 en Windows 8:

Como IE6 no comprende los selectores de atributos, puede combinar un script que solo ve IE6 (con comentarios condicionales) y jQuery o IE7.js por Dean Edwards.

IE7 (.js) es una biblioteca de JavaScript para hacer que Microsoft Internet Explorer se comporte como un navegador compatible con los estándares. Soluciona muchos problemas de HTML y CSS y hace que PNG transparente funcione correctamente en IE5 e IE6.

La elección de usar clases o jQuery o IE7.js depende de tus gustos y disgustos y de tus otras necesidades (tal vez la transparencia PNG-24 en todo tu sitio sin tener que depender de PNG-8 con una transparencia completa que retrocede a la transparencia de 1 bit en IE6 - solo creado por Fireworks y pngnq, etc.)

Aunque CSS proporciona una manera de hacer el estilo específico del tipo de casilla de verificación u otro tipo, habrá problemas con los navegadores que no lo admitan.

Creo que su única opción en este caso será aplicar clases a sus casillas de verificación.

simplemente agregue la clase = "casilla de verificación" a sus casillas de verificación.

Luego cree ese estilo en su código CSS.

Una cosa que podrías hacer es esto:

main.css

input[type="checkbox"] { /* css code here */ }

ie.css

.checkbox{ /* css code here for ie */ }

Luego use el css específico de IE que incluye:

<!--[if lt IE 7]>
   <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

Aún necesitará agregar la clase para que funcione en IE, y no funcionará en otros navegadores que no sean IE que no sean compatibles con IE. Pero hará que su sitio web sea innovador con el código CSS y, a medida que IE obtenga soporte, podrá eliminar el código CSS específico, es decir, las clases CSS de las casillas de verificación.