logo标签列表

CSS Box-Shadow在Webkit中与Textarea不起作用

csswebkittextarea
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中它能够正常工作。同时，在webkit浏览器中border:1px solid red也能够正常工作。问题出在哪里呢？我甚至尝试过使用textarea {display:block;}，以为这可能是一个内联问题。

使用Chrome的Web开发工具并将“required”添加到stackoverflow答案文本区域，对我来说很好用。 - Ross
4个回答
17

你需要添加

-webkit-appearance: none;

强制让令人惊叹的webkit渲染文本区域（textarea）作为普通块并应用你编写的所有CSS。

查看 jsfiddle

我会给你一个有用的，因为它确实有效。虽然我不认为这个特定供应商的代码是最佳选择。 - doubleJ
2
问题在于这些特定供应商的代码导致了你的样式无法应用。请注意，非 WebKit 浏览器不会出现这个问题。 - Spadar Shut
我选择这个作为答案。边框确实解决了问题，但是这个方法似乎不仅解决了那个问题，还解决了其他问题（例如border-radius）。 - doubleJ
2
如果您给文本域设置了背景属性为none(或为除白色外的其他颜色设置了背景颜色)，则阴影会起作用。
<style> 
:required { 
     background: none; 
     box-shadow:0 0 5px red;
} 
</style>
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;
}​

DEMO. and Read this.

0
尝试通过类或ID选择Textarea，而不是使用:required选择器。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接