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

Posted 2023-03-06

【中文标题】如何更改 chrome 中文本框的焦点样式？

【英文标题】：How can i change focus style of textbox in 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 中更改焦点样式？

【参考方案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;