文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS Box-Shadow不能在Webkit中使用Textarea

问CSS Box-Shadow不能在Webkit中使用Textarea
EN

Stack Overflow用户

提问于 2012-07-26 05:22:14

回答 4查看 6.9K关注 0票数 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;}，认为这可能是一个内联问题。

webkit

textarea

css

回答 4

Stack Overflow用户

回答已采纳

发布于 2012-07-26 06:03:16

您需要添加

-webkit-appearance: none;

为了强制这个很棒的webkit，将textarea渲染为一个普通的块，并应用您编写的所有CSS。

See jsfiddle

票数 16

Stack Overflow用户

发布于 2012-07-26 05:39:12

如果你给文本区域一个背景声明为none (或者出于某种原因背景颜色声明，除了白色以外的任何东西)，阴影就会起作用。

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

票数 2

Stack Overflow用户

发布于 2012-07-26 05:43:12

尝尝这个

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

和。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/11658840

复制

相似问题

问CSS Box-Shadow不能在Webkit中使用Textarea
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS Box-Shadow不能在Webkit中使用TextareaEN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS Box-Shadow不能在Webkit中使用Textarea
EN