css - 盒子阴影在 Chrome 中不起作用

Question

我无法在 chrome 中制作盒子阴影，我使用了 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如上所示删除。更多信息可以在这个答案中找到。