如何改变突出显示风格？

Question

在谷歌浏览器中，突出显示（=选中，当你的光标在里面时）文本框被一条橙色的彩色线包围，这条线不是非常难以看见。

有没有办法使用CSS更改此内容？我想进一步提升亮点。

Answer 1

像这样：

input:focus {
    outline: 15px solid pink;
}

Answer 2

如果你想在边框上保持模糊效果，这是一个如何做到这一点的例子。

http://jsfiddle.net/pxfunc/aE4PY/

您可以通过在outline:none上设置input来阻止默认的Chrome行为，这也适用于任何伪类（如:focus）

input {
    border:solid 1px #aaa;
    outline:none;
}
input:focus {
    -webkit-box-shadow: 0 0 4px yellow;
     -khtml-box-shadow: 0 0 4px yellow;
       -moz-box-shadow: 0 0 4px yellow;
        -ms-box-shadow: 0 0 4px yellow;
         -o-box-shadow: 0 0 4px yellow;
            box-shadow: 0 0 4px yellow;
}

为了box-shadow能够正常工作，我必须手动设置border。此外，最新版本的浏览器支持没有供应商前缀的box-shadow。

对于圆角和过渡宽松等奖励效果，请查看此帖 http://blog.gesteves.com/post/475773360/css-glow-effects-with-box-shadow