alex alex - 1 year ago 74
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" 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.


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


How do I make
fall in line?

Answer Source

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

all fixed

outline-offset: -2px;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download