CSS Box-Shadow funktioniert mit Textarea In Webkit

Dieser einfache Code funktioniert nicht in Chrome oder Safari ...CSS Box-Shadow funktioniert mit 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>

Es in Firefox und Opera funktioniert gut. border:1px solid red funktioniert auch gut in Webkit-Browsern. Was ist das Problem? Ich versuchte sogar textarea {display:block;} zu denken, dass es ein Inline-Problem hätte sein können.

Quelle

2012-07-25 doubleJ

funktioniert gut für mich chromes Web-Entwickler-Tools + Hinzufügen von 'required' auf die Antwort Stackoverflow TextArea- – Ross

Sie müssen hinzufügen

-webkit-appearance: none;

auf die ehrfürchtige webkit TextArea- als gewöhnlicher Block machen zu zwingen und gelten alle CSS Sie schreiben.

See jsfiddle

Quelle

2012-07-25 22:03:16

Ich gebe dir ein nützliches, wie es funktioniert hat. Ich denke jedoch nicht, dass dieser herstellerspezifische Code die beste Option ist. – doubleJ

Die Sache ist, dass dieser herstellerspezifische Code die Ursache dafür ist, dass Ihre Stile nicht angewendet werden. Beachten Sie, dass Nicht-Webkit-Browser dieses Problem nicht aufweisen. –

Ich wähle das als Antwort. Die Grenze hat das spezifische Problem gelöst, das die Frage betraf, aber dies scheint dieses Problem zu lösen, ebenso wie andere Probleme (z. B. "border-radius"). – doubleJ

versuchen, die Textarea über eine Klasse oder id anstelle des :required Wählers Auswahl

Quelle

2012-07-25 21:30:41

Wenn Sie dem Textfeld einer Hintergrund Erklärung keine (oder eine Hintergrund-Farbe Erklärung aus irgendeinem Grunde alles geben, außer Weiß) der Schatten wird funktionieren.

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

Quelle

2012-07-25 21:39:11 DigTheDoug

Dies funktioniert, aber webkit enthält einen schwarzen Rand mit. – doubleJ

Versuchen Sie, diese

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

Quelle

2012-07-25 21:43:11

CSS Box-Shadow funktioniert mit Textarea In Webkit

Antwort

Verwandte Themen