Hello!

There are several input elements. The task for: hover and: focus is to give them the same styles. I suffer for several hours, all to no avail. If one input is in focus, and at the same time we point to another input, then their styles are different, namely, the outline of: hover is more than that of: focus. What is the reason and how to solve this problem. Here is a picture of the problem: enter image description here and here is the sample code:

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" />

It is also necessary that their styles be absolutely identical.

  • I have the same. joxi.ru/Grqe1g6Fwxkprz You can still have the styles prescribed for input, separately somewhere - user190134
  • No, all the styles that are are written in the sample code. Google browser. - Astor
  • Chrome put your styles apart from yours, for example, I added an empty input style to HTML without styles — and with focus it is already with styles. It is necessary to catch in the console of the browser which styles you are substituted for - user190134

2 answers 2

It looks like it is due to the preset chrome styles (test in chrome and fox, normal in fox).

For chrome, add outline-offset: 0px;

  • @Animal, apparently you're right. Thank you very much. - Astor

I have the same. http://joxi.ru/Grqe1g6Fwxkprz

You can have more styles registered to the input, separately somewhere.