-1

我正在尝试在 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）

4

4 回答 4

2

为输入字段提供边框，box-shadow 最终将起作用。

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;

}
于 2013-02-25T16:41:09.260 回答
1

基本上，WebKit 不允许我们为具有原生外观的表单控件添加 box-shadow。我们需要删除 nativa 外观。

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

此外，一些 CSS 属性（例如边框和背景）暗示 -webkit-appearance:none。

于 2013-02-10T17:12:01.973 回答
1

的背景颜色input搞砸了。看看这个更新的小提琴，对 CSS 进行了这个更改：

input {
    /* ... rest as before ...*/
    background-color: transparent;
}
于 2013-02-10T10:29:18.320 回答
0

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

于 2013-02-10T12:44:01.723 回答