0

Всем привет!

Есть несколько элементов input. Задача при :hover и :focus задать им одинаковые стили. Мучаюсь уже несколько часов, все без толку. Если один input находится в фокусе, и при этом мы наводим на другой input, то стили у них отличаются, а именно - outline у :hover больше чем у :focus. С чем это связано и как решить эту проблемы. Вот фотография проблемы:введите сюда описание изображения а вот образец кода:

input {
  display: block;
  margin: 5px;
  border: 1px solid silver;
  outline: none;
}

input:hover,
input:focus {
  border-color: grey;
  outline: 2px solid blue;
}
<input type="text" />
<input type="text" />
<input type="text" />

Нужно же, чтобы стили у них были абсолютно идентичны.

3
  • у меня одинаковые.joxi.ru/Grqe1g6Fwxkprz У тебя может быть еще стили прописаны к инпутам, отдельно где то
    – user190134
    13 июл 2016 в 0:08
  • Нет, все стили, какие есть, написаны в примере кода.Браузер Google.
    – Astor
    13 июл 2016 в 0:11
  • хром стави свои стили помимо Ваших, вот к примеру добавил на чистый хтмл без стилей инпут - и при фокусе он уже ссо стилями. Нужно в консольке браузера отловить какие стили Вам подставляются
    – user190134
    13 июл 2016 в 0:17

2 ответа 2

2

Похоже это из-за предустановленных стилей хрома (тестил в хроме и лисе, в лисе нормально).

Для хрома добавьте outline-offset: 0px;

1
  • @Animal, судя по всему Вы правы. Спасибо большое.
    – Astor
    13 июл 2016 в 0:17
0

у меня одинаковые.http://joxi.ru/Grqe1g6Fwxkprz

У тебя может быть еще стили прописаны к инпутам, отдельно где то.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.