example - Estilo de entrada de casilla CSS

css wildcard

Question

Cualquier estilo de input afecta 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?

Answer 1

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 la input[type=radio] para input[type=checkbox] y cambie border-radius:15px; a border-radius:4px; .

Espero que esto te sea útil.

Answer 2

Aunque CSS proporciona una manera para que usted haga 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 tu única opción en este caso será aplicar clases a tus casillas de verificación.

solo agregue class = "checkbox" a sus casillas de verificación.

Luego crea ese estilo en tu 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 */ }

A continuación, utilice el css específico de IE incluyen:

<!--[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 y que no sean compatibles con IE. Pero hará que su sitio web tenga una visión de futuro con código CSS y, como IE obtiene soporte, podrá eliminar el código CSS específico y las clases CSS de las casillas de verificación.

Answer 3

Como IE6 no comprende 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 de JavaScript para 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 aversiones y de tus otras necesidades (tal vez transparencia PNG-24 en todo tu sitio sin tener que depender de PNG-8 con una transparencia total que se reduce a la transparencia de 1 bit en IE6 - solo creado por Fireworks y pngnq, etc.)

Answer 4

Con CSS 2 puedes hacer esto:

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

Esto debería ser bastante amplio soporte ahora. Para ver el soporte para los navegadores, vaya aquí: https://webdesign.tutsplus.com/articles/quick-tip-easy-css3-checkboxes-and-radio-buttons--webdesign-8953

Answer 5

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

Answer 6

Las clases también funcionan bien, como:

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

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

Answer 7

Puede aplicar solo a cierto atributo haciendo:

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

Lo explica here .

Answer 8

Trident proporciona el pseudo-elemento ::-ms-check para los controles de casilla de verificación y botón de radio. 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:

Answer 9

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

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