CSS box-shadow non sta lavorando con Textarea in WebKit

Questo semplice codice non funziona in Chrome o Safari ...CSS box-shadow non sta lavorando con Textarea in 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>

funziona bene in Firefox e Opera. Inoltre, border:1px solid red funziona perfettamente nei browser Webkit. Qual è l'accordo? Ho anche provato a textarea {display:block;} pensando che potesse essere un problema in linea.

fonte

2012-07-25 doubleJ

funziona bene per me usando Chromes web strumenti di sviluppo + aggiungendo 'required' alla StackOverflow risposta textarea – Ross

è necessario aggiungere

-webkit-appearance: none;

per forzare il webkit impressionante rendere textarea come un blocco di ordinaria e applicare tutti i CSS si scrive.

See jsfiddle

fonte

2012-07-25 22:03:16

Ti darò un utile, come ha funzionato. Non penso che questo codice specifico del fornitore sia l'opzione migliore, comunque. – doubleJ

Il fatto è che questo codice specifico del fornitore è la causa del mancato utilizzo degli stili. Si noti che i browser non Webkit non presentano questo problema. –

La scelgo come risposta. Il confine ha risolto il problema specifico che la questione riguardava, ma questo sembra risolvere questo problema, così come altri problemi (ad esempio, "border-radius"). – doubleJ

provare a selezionare la Textarea tramite una classe o id al posto del :required selettore di

fonte

2012-07-25 21:30:41

Se si dà la textarea un sfondo dichiarazione di nessuno (o un background-color dichiarazione per qualche motivo nulla, tranne bianco) l'ombra funzionerà.

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

fonte

2012-07-25 21:39:11 DigTheDoug

Questo funziona, ma WebKit include un bordo nero. – doubleJ

Prova questa

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. e Read this.

fonte

2012-07-25 21:43:11

CSS box-shadow non sta lavorando con Textarea in WebKit

risposta

Problemi correlati