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

Try this:

*:focus {
    outline: none;
}

This would affect all your pages.

Answer 2

The only solutiion that worked with me

The border is actually a shadow. So to hide it I had to do this:

input[type="text"]:focus{
     box-shadow: 0 0 0 rgb(255, 255, 255);
}

 input[type="checkbox"]:focus{
      box-shadow: 0 0 0 rgb(255, 255, 255);
 }

Answer 3

Remove the outline when focus is on element, using below CSS property:

input:focus {
    outline: 0;
}

This CSS property removes the outline for all input fields on focus or use pseudo class to remove outline of element using below CSS property.

.className input:focus {
    outline: 0;
} 

This property removes the outline for selected element.

Answer 4

You could use CSS to disable that! This is the code I use for disabling the blue border:

*:focus {
    outline: none;
}

This is a working example

Answer 5

I tried all the answers and I still couldn't get mine to work on Mobile, until I found -webkit-tap-highlight-color.

So, what worked for me is...

* { -webkit-tap-highlight-color: transparent; }

Answer 6

You can remove the orange or blue border (outline) around text/input boxes by using: outline:none

input {
    background-color: transparent;
    border: 0px solid;
    height: 20px;
    width: 160px;
    color: #CCC;
    outline:none !important;
}