CSS box-shadow no está trabajando con caja de texto en Webkit

Este código simple no funciona en Chrome o Safari ...CSS box-shadow no está trabajando con caja de texto en Webkit

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Untitled Document</title> 
</head> 
<style> 
:required {box-shadow:0 0 5px red;} 
</style> 
<body> 
<form> 
<textarea required></textarea> 
</form> 
</body> 
</html>

Funciona bien en Firefox y Opera. Además, border:1px solid red funciona bien en los navegadores webkit. ¿Cual es el trato? Incluso intenté textarea {display:block;} pensando que podría haber sido un problema en línea.

Fuente

2012-07-25 doubleJ

me da buenos resultados usando herramientas web dev cromos + añadir 'required' al área de texto respuesta stackoverflow – Ross

es necesario agregar

-webkit-appearance: none;

para forzar el webkit impresionante render área de texto como un bloque común y aplicar todo el CSS que escribe.

See jsfiddle

Fuente

2012-07-25 22:03:16

Te daré una útil, ya que funcionó. Sin embargo, no creo que este código específico del proveedor sea la mejor opción. – doubleJ

El hecho es que este código específico del proveedor es la causa por la cual no se aplican sus estilos. Tenga en cuenta que los navegadores que no son webkit no presentan este problema. –

Estoy eligiendo esto como la respuesta. El límite sí resolvió el problema específico al que se refería la pregunta, pero esto parece resolver ese problema, así como otros problemas ('border-radius', por ejemplo). – doubleJ

oportunidad de seleccionar el Textarea a través de una clase o ID en lugar del :required selector de

Fuente

2012-07-25 21:30:41

Si das el área de texto de un fondo declaración de ninguno (o una background-color declaración por alguna razón nada, excepto blanco) la sombra funcionará.

<style> 
:required { 
    background: none; 
    box-shadow:0 0 5px red; 
} 
</style>

Fuente

2012-07-25 21:39:11 DigTheDoug

Esto funciona, pero webkit sí incluye un borde negro. – doubleJ

probar este

textarea:required { 
    box-shadow: 0 0 5px red; 
    -webkit-box-shadow: 0 0 5px red; 
    -moz-box-shadow: 0 0 5px red; 
    border: solid 0px transparent; // or border: none; 
}

DEMO. y Read this.

Fuente

2012-07-25 21:43:11

CSS box-shadow no está trabajando con caja de texto en Webkit

Respuesta

Cuestiones relacionadas