css - para - Chrome/Safari: la sombra de cuadro solo aparece en la entrada de texto si se especifica un borde

quitar focus de un boton css

Question

Tengo un problema con los navegadores WebKit (Chrome 15.0.x y Safari 5.1.1) donde las sombras de cuadro no se representan en las entradas de texto. Solo por casualidad, descubrí que establecer explícitamente el borde hace que se renderice la sombra del cuadro, incluso si se establece el borde en ''ninguno'' o el valor predeterminado, ''recuadro''. El código siguiente (verlo en acción en JSFiddle ) demostró el problema cuando se lo vio con Chrome o Safari, pero se procesa como se esperaba en Firefox 6.0.2 y Opera 11.52.

HTML

<input type="text" value="Works" style="border:none;" />
<input type="text" value="Works" style="border:inset;" />
<input type="text" value="Doesn''t" />

CSS

input[type="text"] {
    margin: 1em;

    -webkit-box-shadow: 0px 0px 2px 1px green;
    box-shadow: 0px 0px 2px 1px green;
}

¿Me falta algún detalle sobre el uso de sombreados de caja en WebKit o he encontrado un error?

Answer 1

input s, en WebKit, tienen esta propiedad aplicada por defecto:

-webkit-appearance: textfield;

Esto es lo que desea si desea que la apariencia del campo de texto dependa de la plataforma. A veces puede ajustar el estilo con esta configuración fija, pero otras veces, debe establecerse en none , lo que hace que aplique CSS estándar y dependa menos del sistema operativo. Parece que el border desencadena automáticamente, pero box-shadow no lo hace, pero box-shadow solo se aplica si -webkit-appearance none es none . (el hecho de que la apariencia dependiente de la plataforma no se apague si se aplica box-shadow y esa box-shadow no se representa si la apariencia dependiente de la plataforma está habilitada puede ser un error)

Para solucionar esto, simplemente explícitamente dile que no use la apariencia dependiente de la plataforma:

input[type="text"] {
    -webkit-appearance: none;
}

-webkit-appearance: none; con -webkit-appearance: none; adicional.

La desventaja de esto es que pierdes (parte de) el aspecto nativo de la plataforma, pero si estás tratando de usar box-shadow , es posible que estés tratando de alejar el estilo nativo de todos modos.