9

この単純なコードはChromeまたは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>

FirefoxとOperaでは問題なく動作します。また、border:1px solid redWebkitブラウザでも問題なく動作します。どうしたんだ？textarea {display:block;}インラインの問題かもしれないと思ってみました。

4

4 に答える 4

16

追加する必要があります

-webkit-appearance: none;

素晴らしいWebkitレンダリングtextareaを通常のブロックとして強制し、作成したすべてのCSSを適用します。

jsfiddleを参照してください

于 2012-07-25T22:03:16.457 に答える
2

これを試して

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;
}​

デモ。そしてこれを読んでください。

于 2012-07-25T21:43:11.980 に答える
2

textareaにnoneの背景宣言（または何らかの理由で白以外の背景色宣言）を指定すると、シャドウが機能します。

<style> 
:required { 
     background: none; 
     box-shadow:0 0 5px red;
} 
</style>
于 2012-07-25T21:39:11.613 に答える
0

セレクターTextareaの代わりにクラスまたはIDを介して選択してみてください:required

于 2012-07-25T21:30:41.467 に答える