box-shadow在Chrome中不起作用

Question

我无法在chrome中使用box shadow工作，我使用了webkit前缀但仍然在我的标签周围得到橙色框架而不是我应该得到灰色阴影。这适用于除Chrome以外的所有浏览器。

.loginForm input[type='text']:focus, .loginForm input[type='password']:focus,
.registerForm input[type='text']:focus, .registerForm input[type='password']:focus{
    box-shadow: 0 0 10px gray;
    -webkit-box-shadow: 0 0 10px gray;
}

Answer 1

这对我来说没什么问题，但我认为你所看到的是outline焦点掩盖阴影的主张。

.selector {
    outline: 0;
    box-shadow: 0 0 10px gray;
}

http://jsfiddle.net/VKkng/

Answer 2

您需要更改声明方框阴影属性的顺序 - 未加前缀的版本应该是最后一个，如下所示：

.loginForm input[type='text']:focus, 
.loginForm input[type='password']:focus,
.registerForm input[type='text']:focus, 
.registerForm input[type='password']:focus{
    -webkit-box-shadow: 0 0 10px gray;
    box-shadow: 0 0 10px gray;

    /* Remove the orange focus border */
    outline: 0;
}

橙色边框是Chrome的默认焦点样式，可以使用outline: 0删除，如上所示。有关详细信息，请参阅this answer。