如何更改 chrome 中文本框的焦点样式？答案

【问题标题】：How can i change focus style of textbox in chrome?如何更改 chrome 中文本框的焦点样式？
【发布时间】：2012-01-09 19:47:42
【问题描述】：

我有一个文本框，我已经改变了文本框的焦点样式。

Username: <asp:TextBox ID="UserName" runat="server" Font-Size="0.8em" class="t_box"></asp:TextBox>

风格：

.t_box
{
    width:300px;
    padding:8px 0;
    border:none;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    font-size:16px;
    line-height:20px;
    color:#454545;

}

.t_box:focus
{
    border:1px solid #383838;
    -webkit-box-shadow: 0 0 15px #383838;
    -moz-box-shadow: 0 0 15px #383838;
    box-shadow:0 0 20px #383838;
}

这在 Firefox 中运行良好，但在 chrom 中我只能看到焦点时为橙色的默认样式。如何在 chrome 中更改焦点样式？

【问题讨论】：

标签： asp.net css google-chrome focus

【解决方案1】：

只是一些额外的 CSS 供参考：

input:focus,
textarea:focus {
  outline: 0;
 -moz-outline-style: none;
  border-color: rgba(82,168,236,.8);
}

【讨论】：

【解决方案2】：

focus 不使用border，而是使用outline。您必须先zero out outline 属性，然后才能添加其他样式以移除橙色轮廓。

【讨论】：

归零：outline: none;