Как я могу изменить стиль фокуса текстового поля в Chrome?

Question

У меня есть текстовое поле, и я изменил стиль текстового поля в фокусе.

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?

Answer 1

Для фокусировки

используется не border, а outline.Вы должны zero out свойство outline, прежде чем добавлять другие стили, чтобы удалить оранжевый контур.

Answer 2

Просто некоторые дополнительные CSS для справки:

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