CSS Aplicar frontera para todos los elementos de entrada, excepto casilla

tengo una clase css:CSS Aplicar frontera para todos los elementos de entrada, excepto casilla

input { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 10px; 
    border: 1px solid #003399; 
}

que trabaja para la mayor parte de lo que quiero pero ahora tengo que tener una casilla de verificación que no tiene esta frontera, mientras que el el resto de los elementos de entrada en la página continúa teniendo el borde aplicado.

Por lo tanto, creó la clase CSS adicional:

input[type="checkbox"] 
{ 
    border: none; 
}

Esto funciona bien con Firefox y Chrome, pero no decir 8, una al utilizar las herramientas de desarrollo de decir, para inspeccionar el elemento que puedo ver ambos estilos tienen se recogió, pero solo cuando deselecciono la casilla de verificación junto al estilo de entrada desaparece el borde para las casillas de verificación.

Este es el valor predeterminado:

enter image description here

Y esto es lo que hago para deshacerse de la frontera:

enter image description here

Fuente

2011-07-11 Anonymous

¿evaluó la posibilidad de utilizar javascript para gestionar eso? en IE, los selectores de atributos tienen errores (y hasta la versión 7 no eran compatibles) –

¿Qué sucede si no especifica ningún borde para todas las entradas y luego las agrega a las entradas que desea? – MrMisterMan

Parece ser un error en el manejo del selector de atributos. Usar una clase en lugar del selector de atributos lo hace funcionar bien. Nota: * funciona * cuando usted se asegura de que haya un tipo de documento apropiado, como el simple –

¿Por qué no usar simplemente el selector: not para invertir el selector de atributos?

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

Si es IE8 o antes, que es mejor usar reglas separadas para las clases en las que haces desea establecer la frontera, ya que no soporta: no (o cualquiera de las cosas buenas) .

Editar:

input[type=checkbox] 
{ 
    border: none; 
}

obras en IE8 si se agrega un tipo de documento, incluso el simple html < tipo de documento >

Fuente

2011-07-11 14:55:41

Probé eso pero con la entrada: no ([tipo = casilla de verificación]) ninguna de las entradas tiene el borde deseado aplicado. –

El análisis del selector de atributo IE es cruddy.También es la causa de tu problema raíz. Si usa una clase en lugar del selector de atributos o cuando se asegura de que haya un tipo de documento adecuado, como el simple , el borde: ninguna anulación funciona bien. –

Aplicar una clase directamente a la casilla de verificación funciona perfecto. Gracias Steven –

Parece decir medium none. Puedes probar border: 0px transparent; para ver si eso marca la diferencia.

Fuente

2011-07-11 14:44:38 MrMisterMan

no hizo ninguna diferencia MrMisterMan. También probé la entrada [type = "checkbox"] { \t width-width: 0px; \t border-style: none; } –

Valió la pena intentarlo. – MrMisterMan

sí lo era, gracias MrMisterMan –

En IE no es el límite que está viendo. Debe ser el resaltado debido al enfoque en la casilla de verificación. Intente ejecutar el desenfoque del evento en la casilla de verificación haga clic en lo que podría ayudar.

Fuente

2011-07-11 14:44:43 ShankarSangoli

ayuda esto?

input[type="checkbox"] 
{ 
    border: none !important; 
}

Fuente

2011-07-11 14:57:51

No, no hizo ninguna diferencia, gracias de todos modos Esclavo –

mejor para evitar '! Important' tanto como sea posible – Muhammed

CSS Aplicar frontera para todos los elementos de entrada, excepto casilla

Respuesta

Cuestiones relacionadas