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 red在 webkit 浏览器中也可以正常工作。这是怎么回事？我什至试着textarea {display:block;}认为这可能是一个内联问题。

4

4 回答 4

16

您需要添加

-webkit-appearance: none;

强制令人敬畏的 webkit 将 textarea 渲染为普通块并应用您编写的所有 CSS。

见 jsfiddle

于 2012-07-25T22:03:16.457 回答
2

如果您给 textarea 一个无背景声明（或出于某种原因的背景颜色声明，除了白色之外的任何内容），阴影将起作用。

<style> 
:required { 
     background: none; 
     box-shadow:0 0 5px red;
} 
</style>
于 2012-07-25T21:39:11.613 回答
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 回答
0

尝试Textarea通过类或 id 而不是:required选择器选择

于 2012-07-25T21:30:41.467 回答