Estilo de entrada de casilla de verificación CSS

Algo que descubrí recientemente para el estilo de Botones de opción 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; a border-radius:4px;.

Espero que esto sea algo útil para ti.

Las clases también funcionan bien, tales como:

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

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

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

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

Puede aplicar solo a cierto atributo haciendo:

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

Lo explica aquí.

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

IE7(.js) es una biblioteca 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 bajo IE5 e IE6.

La elección de usar clases o jQuery o IE7.js depende de tus gustos y disgusta y sus otras necesidades (tal vez la transparencia PNG-24 en todo su sitio sin tener que depender de PNG-8 con transparencia completa que recurre a la transparencia de 1 bits en IE6, solo creada por Fireworks y pngnq, etc.)

Trident proporciona el pseudo-elemento ::-ms-check para los controles de casilla de verificación y botón de opción. Por ejemplo:

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

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

Esto se muestra de la siguiente manera en IE10 en Windows 8:

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

Aunque CSS proporciona una forma de hacer el estilo específico para el tipo de casilla de verificación u otro tipo, habrá problemas con los navegadores que no admiten esto.

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

Simplemente agregue la"casilla de verificación" class=a sus casillas de verificación.

Luego crea ese estilo en tu código css.

Una cosa que puedes 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 include:

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

Todavía necesitará agregar la clase para que funcione en IE, y no funcionará en otros navegadores que no sean IE que no soporten IE. Pero hará que su sitio web sea progresista con código CSS y, a medida que IE obtenga soporte, podrá eliminar el código CSS específico de ie y también las clases CSS de las casillas de verificación.