Question

此简单代码无法在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;}认为这可能是一个内联问题。

Answer 1

您需要添加

-webkit-appearance: none;

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

See jsfiddle

Answer 2

如果你给textarea一个背景声明 none （或某个背景颜色声明，因为某些原因，除了白色之外的任何东西）阴影会工作的。

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

Answer 3

试试这个

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.和Read this。

Answer 4

尝试通过类或ID而不是Textarea选择器

选择:required

CSS Box-Shadow在Webkit中不使用Textarea

4 个答案: