CSS Box-Shadow 不适用于 Webkit 中的 Textarea答案

【问题标题】：CSS Box-Shadow Isn't Working With Textarea In WebkitCSS Box-Shadow 不适用于 Webkit 中的 Textarea
【发布时间】：2012-07-25 21:22:14
【问题描述】：

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

【问题讨论】：

使用 chromes web 开发工具 + 将 required 添加到 stackoverflow 答案 textarea 对我来说效果很好

标签： css webkit textarea

【解决方案1】：

你需要添加

-webkit-appearance: none;

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

See jsfiddle

【讨论】：

我会给你一个有用的，因为它确实有效。不过，我不认为这个供应商特定的代码是最好的选择。
问题是这个供应商特定的代码是你的样式没有被应用的原因。请注意，非 webkit 浏览器不会出现此问题。
我选择这个作为答案。边界确实解决了问题所涉及的具体问题，但这似乎解决了该问题以及其他问题（例如border-radius）。

【解决方案2】：

如果你给 textarea 一个 background 声明 none （或者一个 background-color 声明由于某种原因除了白色之外的任何东西）阴影会工作的。

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

【讨论】：

【解决方案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。

【讨论】：

【解决方案4】：

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

【讨论】：