This is caused by outline , not border. The specific style that you see is defined in the stylesheet of the user (browser).
I agree that in many cases the chrome is large, the highlighted outline looks bad, although it makes it clear which field is active.
As of the beginning of 2014, the backlight is now blue (instead of yellow), and the highlight effect is less. The following instructions are still valid for changing this style.
Delete contour
You can set outline: none; on any item to completely remove the selection.
input[type="text"], input[type="password"] { outline: none; }
This potentially (probably) reduces accessibility / usability. There is even a dedicated website to completely remove the outline.
Contour styling
A better alternative is the outline style so that it is still visible but less unpleasant. See https://developer.mozilla.org/en-US/docs/CSS/outline
Demo: http://jsfiddle.net/G28Gd/2/
INPUT[type="text"]:focus, INPUT[type="number"]:focus, INPUT[type="email"]:focus, INPUT[type="search"]:focus, INPUT[type="password"]:focus, INPUT[type="range"]:focus { outline: 1px solid #0033dd; }
User Expectations
Sometimes style authors can create outlines around visual objects such as buttons, active form fields, image maps, etc. so that they stand out.
In theory, the circuit can be used for cosmetic purposes, although I have never found practical use other than indicating focus. However, it is best to show only the focal path when the element is actually focused. In other words, do not make the element focused if it is not.
Remember that HTML bindings can also get focus and that their outline can also be styled. This may be a helpful hint to the user.
visual rendering
The outline created using the outline properties is drawn above the "above" field, i.e. the contour is always on top, and does not affect the position or size of the box or any other boxes. Therefore, displaying or suppressing outlines does not cause overflow or overflow.
A path can be applied to any element (again, do not confuse the user).
Unlike borders, they do not affect the position or size of the window. This is important, for example, when it is shown that the binding has focus; if you add a border to the anchor, the whole box will be noticeably shifted to fit the border ( try ). For comparison, the circuit does not shift the box.
One drawback of this independent box is that the circuit does not always do exactly what you expect. Replaced items may appear in ways (now or in the future) that may not look good with a particular highlight style. <input type="range"> is a good candidate for observing this behavior.
This outline is functional, but not very beautiful, or even properly aligned (Chrome 26-29).
Button elements currently (Chrome 21) look correct with an outline (try it and see if the outline will not follow the edge of the button).
The outlines are now aligned at the edges of the button with Chrome 26.