Question

我正在尝试在Chrome中的输入字段上处理内部阴影。不幸的是，到目前为止，这并没有真正奏效。您可以在此处查看jsfiddle：http://jsfiddle.net/XgsPT/2/

我的CSS：

input {
margin-top: 15px;
margin-left: 15px;
-moz-box-shadow:    inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow:         inset 0 0 10px #000000;
}

这个简单的HTML：

<input type="text" width="30">

但没有出现阴影......（Chrome 24）

Answer 1

为输入字段添加边框，框阴影最终会起作用。

http://jsfiddle.net/Jx8xF/

input {
    margin-top: 15px;
    margin-left: 15px;
   -moz-box-shadow:    inset 0 0 10px #aaa;
   -webkit-box-shadow: inset 0 0 10px #aaa;
   box-shadow:         inset 0 0 10px #aaa;
    border: 1px solid #aaa;

}

Answer 2

input的背景颜色搞砸了。查看this updated fiddle，对CSS进行此更改：

input {
    /* ... rest as before ...*/
    background-color: transparent;
}

Answer 3

基本上，WebKit不允许我们添加box-shadow来形成具有原生外观的控件。我们需要去除nativa外观。

input {
    -webkit-appearance: none;
    box-shadow: inset 0 0 10px #000000;
}

此外，一些CSS属性，如border和background暗示-webkit-appearance：none。

Answer 4

不是将背景设置为透明，而是将其设置为白色，或者您喜欢的任何颜色，您只需要声明它然后它就可以正常工作

插入框阴影不起作用

4 个答案: