How to Remove Blue Border on Targeted Button and Input Box - HTML/CSS

You may have encountered a border/outline around your input box and button when they focus. They look annoying when you have added another border around it especially if the style is totally different.

Sometimes the border color is not always blue. It may be orange. Or it may be another color. However, what causes this is the browser you use. So, the border color depends on your browser. Actually, your browser wants to help you find the selected item easily. But, sometimes, as a blogger and designer, I think the additional border looks bad (not matching with my style).

Therefore, I'm gonna share how to remove it.

How to Remove the Blue Border on Active/Focus Input Box and Button

Basic Concept

Essentially, the blue border is a CSS attribute that automatically created WHEN THE INPUTS ARE ON FOCUS. Therefore, logically, the way to remove the blue border is by removing the CSS attribute when the inputs focus. Unfortunately, I think that's impossible. But, the good news is there's another way to remove the blue border without removing entire attribute. It's by "emptying" the value of the attribute.

Which attribute? If you think it's simply a border, you are wrong. Yeah, you can call it as a border even I also call it like that. However, the actual attribute is:

outline

That is it. When the blue border is created automatically, the outline is also created. And I don't know the exact value of the outline right at the time. That's not important or even our business. We just need to empty the value. So now what you can do is to put the outline attribute along with its empty value to your input boxes and buttons CSS style.

outline: 0!important;

0 is the empty value and !important is a mark that prioritize the attribute than any other similar attributes with different value.

What You Can Do / How to Implement

What you can do to remove the blue border is by putting the outline: 0!important; to the HTML element directly. Just like this:

<input style="outline:0!important"...>

In other word put the style="outline:0!important" inside your HTML element anywhere. However it must be after the <input ... and before the ... >.

And if there is already a style="..." attribute in the HTML element then put the outline:0!important; only between the quotation mark of the style attribute. Well, I hope it is clear enough.

After you've changed the codes, save your HTML file/template. Well done!

Note: Do you not find any change? It may be due to your cache. Clear your cache then refresh your page again. Enjoy!

Need more helps? Not clear enough?

Please tell us if you need more helps. I.e: the implementation way.