html - 无法为输入表单应用框阴影插图

Question

我希望我的输入表单有内嵌阴影，但它不起作用。这是我的代码

 #searchopt div input[type='text'],#searchopt div select{
width:220px;height:30px;padding:6px;
/* Overall Layout: box shadow insect*/

-webkit-box-shadow: inset 10px 3px 296px -172px rgba(51,39,51,1);

-moz-box-shadow: inset 10px 3px 296px -172px rgba(51,39,51,1);

box-shadow: inset 10px 3px 296px -172px rgba(51,39,51,1);

}

但是，我的整体包装器 div 我也使用了阴影，但在阴影之外，它工作正常。在这里

/* Overall Layout*/
#wrapper{
margin:0px auto;
border:.5px solid #CCC;
width:1028px;
height:1028px;
overflow:hidden;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
/* Overall Layout: box shadow*/
-webkit-box-shadow: 0px 1px 8px 0px rgba(50, 50, 50, 0.69);
-moz-box-shadow:    0px 1px 8px 0px rgba(50, 50, 50, 0.69);
box-shadow:         0px 1px 8px 0px rgba(50, 50, 50, 0.69);
}

谁能帮帮我？谢谢

Answer 1

将 border: none; 添加到输入 CSS。这样输入就不会使用默认的、特定于浏览器的输入样式，并且 box-shadow 应该可以工作

[编辑] 这是一个 fiddle :http://jsfiddle.net/AR6m8/ .我不得不使用自定义阴影值来查看它是否有效，因此您的问题可能出在阴影值上。