alex alex - 5 months ago 11
CSS Question

Search input's focused border is wrong in Chrome

If you go to the trouble of having a search input in Chrome for semantic fuzziness, and then decide it looks too much like a standard search input, you can reset it back with some CSS.

input[type="search"]

<input type="search" name="filter" style="-webkit-appearance: textfield;" />


However, this apparently means that the blue focus style no longer wants to play ball. In the moment the search input's guard is down, it makes a 2px run for the hills in all directions.

focus!

If you swap the
type
attribute back to
text
, the focus returns to base, apologises and carries on like nothing happened.

normal

How do I make
input[type="search"]
fall in line?

Answer

There is a CSS property, outline-offset, that you can juggle with to restore the behaviour.

all fixed

outline-offset: -2px;