CSS Box-Shadow Funktioniert nicht Mit Textarea In Webkit

Dieser einfache code funktioniert nicht in Chrome oder Safari...

<!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 funktioniert Prima in Firefox und Opera. Auch border:1px solid red funktioniert in webkit-Browsern. Was ist der deal? Ich habe sogar versucht textarea {display:block;} denken, dass es hätte ein inline-Problem.

  • funktioniert bei mir mit Chrome web-dev-tools + Zugabe required stackoverflow-Antwort textarea
InformationsquelleAutor doubleJ | 2012-07-25
  1. 16

    Müssen Sie

    -webkit-appearance: none;

    zu zwingen, die genial webkit-render-textarea als ein gewöhnlicher Häuserblock und gelten für alle CSS-Sie schreiben.

    Siehe jsfiddle

    • Ich gebe dir ein hilfreich, da es funktioniert hat. Ich glaube nicht, dass diese Hersteller-spezifische code ist die beste option, wenn.
    • Die Sache ist, dass diese Hersteller-spezifische code ist die Ursache, warum sich Ihre Stile nicht angewendet. Beachten Sie, dass nicht-webkit-Browsern nicht dieses problem aufweisen.
    • Ich habe mich entschieden, dies als die Antwort. Die Grenze löste das spezifische problem, dass die Frage betreffend, aber das scheint diese Probleme zu lösen, sowie andere Probleme (border-radius zum Beispiel).
    InformationsquelleAutor Spadar Shut
  2. 2

    Geben Sie der textarea einen hintergrund Erklärung der keine (oder ein background-color Erklärung aus irgendeinem Grund nichts außer weiß) die Schatten arbeiten.

    <style> 
:required { 
     background: none; 
     box-shadow:0 0 5px red;
} 
</style>
    • Das funktioniert auch, aber webkit beinhaltet einen schwarzen Rand.
    InformationsquelleAutor DigTheDoug
  3. 2

    Versuchen, 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.

    InformationsquelleAutor The Alpha
  4. 0

    versuchen Sie, die Textarea über eine Klasse oder id anstelle der :required selector

    InformationsquelleAutor Moin Zaman
Schreibe einen Kommentar