Блог

Это может быть глупый вопрос, но эта вещь беспокоит меня больше, чем следовало бы. Общеизвестно, что Google Chrome <input> по умолчанию выделяет элементы, когда они сфокусированы. Мне не нравится его внешний вид по умолчанию, поэтому я реализовал свой собственный outline для focus селектора в своем CSS:

 #LoginForm input:focus {
    outline: #1F377A dotted 1px;
}
  

Оригинальная реализация Chrome выглядит следующим образом (обратите внимание на синий контур вокруг ввода текста):

Но, используя мою собственную реализацию css, это выглядит так:

Почему мой контур отображается внутри текстового ввода, а не вокруг, как контур Chrome по умолчанию?

Это соответствующие строки css для моего элемента ввода:

 #LoginForm input {
    display: blocK;
    float: left;
    height: 24px;
    border: none;
    font-family: inherit;
    margin: 0px 0px 0px 4px;
}

#LoginForm input:focus {
    outline: red solid 1px;
}

#LoginForm .textInput {
    padding: 0px 2px 0px 2px;
    font-size: 9pt;
}
  

Единственное, что позволяет мне изменить между моим собственным контуром и контуром chrome, — это просто комментировать input:focus селектор и ничего больше. Я не хочу использовать границы, поскольку они фактически увеличивают размер элемента, а я этого не хочу.

Если вы проверите инструменты разработчика Chrome, контур не является простым контуром размером 1 пиксель, а отображается как

 :focus {
    outline-color: -webkit-focus-ring-color;
    outline-style: auto;
    outline-width: 5px;
}

input:focus, textarea:focus, keygen:focus, select:focus {
    outline-offset: -2px;
}
  

Это то outline-offset , что вы ищете. Чтобы получить красный контур, просто добавьте его в свою таблицу стилей:

 :focus {
     outline-color: #f00;
}
  

Если вы также хотите использовать его для других элементов, используйте:

 .element:focus {
    outline-color: #f00;
    outline-style: auto;
    outline-width: 5px;
    outline-offset: -2px;
}
  

Вот JSFiddle, с которым можно поиграть.

Редактировать:

Чтобы контур находился точно на границе (а не внутри нее), вы должны установить

 outline-offset: 0;
  

чтобы переопределить стили пользовательского агента Chrome.