ejemplo - css alinear checkbox

Restablecer el estilo de entrada para las casillas de verificación predeterminadas en IE

Question

Tengo una regla CSS para una entrada como esta:

input {
    border: 1px solid black;
}

El problema es que las casillas de verificación en IE (probadas en IE 8 y 9) y Opera también heredan este borde y en lugar de mostrar el estilo predeterminado muestran su modo personalizado para las casillas de verificación con fondo blanco y verificaciones negras como esta:

en lugar del estilo nativo, como en Windows 7 con fondo gris degradado y controles de color azul oscuro que se muestran en Chrome y Firefox:

Me gustaría mantener el borde para la regla de entrada en el CSS, pero tengo una clase llamada "casilla de verificación" que puse en todas las casillas de verificación de esta manera:

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

¿Hay alguna forma de restablecer el estilo del borde con la regla .checkbox?

Yo he tratado:

.checkbox {
    border: none;
}

que funciona en Opera para volver al estilo predeterminado, pero no en IE. También probé muchas combinaciones diferentes de:

.checkbox {
    border: 1 none transparent;
}

pero ninguno de estos parece restablecerse al estilo predeterminado de las casillas de verificación en IE.

¿Es posible revertir el estilo predeterminado para las casillas de verificación en IE sin eliminar el borde de la regla de entrada y en su lugar usar la clase .checkbox?

Answer 1

¿No podría incluir ie8-js para hacer que IE8 reconozca no () la pseudoclase CSS3?

http://code.google.com/p/ie7-js/

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

Answer 2

En muchos navegadores, no es posible restablecer la casilla de verificación al estilo nativo predeterminado.

Esta es probablemente la razón por la que los restablecimientos de CSS generalmente no incluyen una regla en este sentido:

input {
    border: 0;
}

La técnica más compatible es hacer esto:

input[type="text"], input[type="password"] {
    border: 1px solid black;
}

y enumera explícitamente cada type de input que deseas diseñar.

Ver: http://jsfiddle.net/EPpJ9/

Esto funcionará en IE7 + y en todos los navegadores modernos.

También podría hacer esto de forma más clara con la pseudoclase not() CSS3, pero eso no funciona en IE8, que es un factor decisivo para mí:

input:not([type="checkbox"]) {
    border: 1px solid black;
}

Answer 3

En caso de que todavía se pregunte si existe una forma de marcar las casillas de verificación y hacer que funcione en la mayoría de los navegadores, incluido IE. Y solo necesitas algunos CSS y solo un poco de javascript y jquery. Funciona en IE6 +

Primero configure su casilla de verificación de esta manera. Solo agregue un elemento de etiqueta con el elemento for que apunta a la identificación de la casilla de verificación.

<input id="mycheckbox" type="checkbox">
<label id="mylabel" for="mycheckbox"></label>

Luego incluye algunos css:

#mycheckbox {
    display: none;
}

Dibuja tu casilla usando el control de tu etiqueta, aquí hay una que hice:

#mylabel {
     float: left;
     margin-top: 11px;
     background-color: #fff;
     border: 1px solid #000;
     display: block;
     height: 12px;
     width: 12px;
     margin-right: 10px;
     -webkit-border-top-right-radius: 20px;
     -webkit-border-bottom-right-radius: 20px;
     -moz-border-radius-topright: 20px;
     -moz-border-radius-bottomright: 20px;
     border-top-right-radius: 20px;
     border-bottom-right-radius: 20px;
     background-position: left center;
}

Debe crear una búsqueda cuando la casilla esté marcada:

#mylabel.checked {
background-color: #808080;
}

Finalmente algo de jquery:

    $(document).ready(function () {
    $("#mycheckbox").change(function () {
       if ($("#mycheckbox").is(":checked")) {
        $("#mylabel").addClass("checked", "checked");
    } else {
        $("#mylabel").removeClass("checked");
    }})
    });

No olvides incluir las bibliotecas de jquery (pon esto en tu etiqueta de cabeza):

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Mira el violín para verlo en acción: violín