How to get rid of blue outer border when clicking on a form input field?

Question

Hi I want to get rid of the blue \"shine\" that appears when you click on a text field and begin to input data. How is this done?

I am a beginner so I am not that experi

Answer 1

Although it's not directly related, I leave a note here since this SO page is what came up in my search. The answers listed here also work for html5 videos. In my case, there was a blue border showing underneath the video in Chrome.

For completeness sake:

video 
{
  outline:none;
}

Answer 2

You can use below style property on element to avoid blue border.

style="box-shadow: none;"

For example: Here, I've used in my button

<button type="button" style="box-shadow: none;">Button</button>

Answer 3

This CSS snippet should work in all major browsers:

input:focus {
    outline:none;
}

If it doesn't, try adding the !important directive:

input:focus {
    outline:none !important;
}

Answer 4

If you want easy solution and want to remove blue border from complete html, use

*:focus {outline:none !important}

Answer 5

You simply add:

<style type="text/css">
#hello:focus
{
  outline:none;
}    
</style>



<input type="text" id="hello"></input>

cheers!