How to remove the border highlight on an input text element

Question

When an HTML element is \'focused\' (currently selected/tabbed into), many browsers (at least Safari and Chrome) will put a blue border around it.

For the layout I a

Answer 1

This was confusing me for some time until I discovered the line was neither a border or an outline, it was a shadow. So to remove it I had to use this:

input:focus, input.form-control:focus {

    outline:none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}