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

【问题标题】：How to style the currently selected field on a web page如何在网页上设置当前选定字段的样式
【发布时间】：2010-12-01 14:37:24
【问题描述】：

Chrome 浏览器在当前选中的输入元素周围加了一个橙色高亮，如何禁用这个高亮或改变它的颜色？

【问题讨论】：

标签： html css forms input

【解决方案1】：

我认为是：

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

我认为。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案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);
}

【讨论】：