Скопируйте стиль контуров ввода по умолчанию Chrome

Ответ 1

стандартный стиль контура Chrome:

outline-color: rgb(77, 144, 254); // #4D90FE
outline-offset: -2px;
outline-style: auto;
outline-width: 5px;

конвертировать в это

 input:focus {
     outline:none; 
     border:1px solid #4D90FE;
     -webkit-box-shadow: 0px 0px 5px  #4D90FE;
     box-shadow: 0px 0px 5px  #4D90FE;
 }

Ответ 2

Не знаю, достаточно ли для вас решения, но до сих пор я не знаю другого способа... Я делаю это так:

textarea:focus
{
    outline:none; /*or outline-color:#FFFFFF; if the first doesn't work*/
    border:1px solid #48A521;
    -webkit-box-shadow: 0px 0px 4px 0px #48A521;
    box-shadow: 0px 0px 4px 0px #48A521;
}

Ответ 3

Ты не можешь, правда.

Chrome использует "автоматический" контурный стиль (что бы это ни значило), и это не соответствует спецификациям CSS3.

Ваш лучший вариант - создать свой собственный стиль выделения и (и, по крайней мере) перезаписать контурный стиль. Таким образом, у всех браузеров будет один и тот же элемент фокуса для вашей страницы.

Копирование стиля хрома очень сложно. Поскольку css по умолчанию не поддерживает теневой контур, поддерживаются только сплошные, пунктирные и т.д. Стили. Вы должны будете имитировать это с помощью box-shadow, однако по какой-то нечетной причине это приведет к тому, что граница окна ввода будет отображаться (в стиле вставки), что заставляет вас определять границу поля ввода.

Вы могли бы сделать что-то вроде этого, например:

input:focus {
  box-shadow: 0px 0px 8px blue;
  outline-style: none;
}
input {
  border: 1px solid #999;
}

http://jsfiddle.net/dstibbe/2wr0pge2/2/

Ответ 4

В Chrome 60 контур теперь синий.

Авто стиль контура создает один пиксельный контур с углами "надрезами".

Это может быть достигнуто с использованием:: before и:: после таких правил:

DIV.someclass--focus {
    outline:none; 
    border: 1px solid #86A8DF !important;
}
DIV.someclass--focus::before {
    position:absolute;
    margin-top:-2px;
    margin-bottom: -2px;
    margin-left: -1px;
    margin-right: -1px;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    content: ' ';
    border-left: none;
    border-right: none;
    border-top: 1px solid #A6C8FF;
    border-bottom: 1px solid #A6C8FF;
}
DIV.someclass--focus::after {
    position:absolute;
    margin-top: -1px;
    margin-bottom: -1px;
    margin-left: -2px;
    margin-right: -2px;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    content: ' ';
    border-left: 1px solid #A6C8FF;
    border-right: 1px solid #A6C8FF;
    border-top: none;
    border-bottom: none;
}

Первое правило изменяет цвет рамки.

Второе правило содержит верхнюю и нижнюю границы, которые начинаются с одного пикселя слева и заканчиваются на один пиксель справа.

Правило thirder обеспечивает левую и правую границу, которая начинается с вершины сверху и заканчивается одним пикселем снизу.

CAVEAT: содержащий элемент должен быть явно "position: relative" для того, чтобы работа:: before/:: после абсолютного позиционирования работала.

Имя класса "someclass-focus" не имеет смысла... оно просто должно применяться/удаляться всякий раз, когда вы хотите, чтобы контур псевдофокуса отображался/исчезал.

Ответ 5

Попробуйте здесь:

CSS по умолчанию для HTML-элементов

У вас есть CSS по умолчанию в Google Chrome. Я уверен, что там будет определен стиль.

P.S.: Вам понадобится Chrome/Safari (WebKit).

Ответ 6

Если вы проверите любой тег ввода, открыв панель стилей в Chrome, вы увидите свойства таблицы стилей пользователя по умолчанию. Используйте средство выбора цвета в инструментах веб-разработчика или плагин выбора цвета хром, чтобы получить значение rgb.