如何设置网页上当前选定字段的样式

Question

Chrome浏览器会在当前所选输入元素周围添加橙色高亮显示，如何禁用此突出显示或更改其颜色？

Answer 1

我认为是：

.myInput:focus /*or # depending*/
{
   outline: #f00; /*or outline: none;*/
}

我想。

Answer 2

您可以使用outline: 0或outline: none停用它。

您还可以使用outline-color: red（或任何其他颜色）更改颜色。

Answer 3

如果右键单击所选输入并选择“检查元素”，您将能够看到默认情况下应用的样式，请在右侧的样式选项卡中查找用户代理样式表。这是相关的一点：

input:focus, textarea:focus, isindex:focus, keygen:focus, select:focus {
    outline-offset: -2px;
}
:focus {
    outline: 5px auto -webkit-focus-ring-color;
}

Answer 4

可行的布局：

:focus{
   outline-color:white; 
}
[required]{
    border-color: #FFF;
    -webkit-box-shadow: 0 0 3px rgba(51, 153, 255, .5);
}
:invalid {
    border-color: #606077;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .8);
}