Как стилизовать текущее выбранное поле на веб-странице

Question

Браузер Chrome помещает оранжевую подсветку вокруг выбранного в данный момент элемента ввода. Как отключить эту подсветку или изменить ее цвет?

Answer 1

Я думаю, что это:

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

Я думаю .

Answer 2

Вы можете отключить его с помощью outline: 0 или outline: none.

Вы также можете изменить цвет с помощью outline-color: red (или любого другого цвета).

Answer 3

Возможный макет:

: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);
}

Answer 4

Если щелкнуть правой кнопкой мыши выбранный вход и выбрать «Проверить элемент», вы сможете увидеть стили, применяемые по умолчанию, найдите таблицу стилей агента пользователя на вкладке стилей справа. Это соответствующий бит:

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