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

问题

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 experienced. My code is:

<input type="text" name="search" size="40" value="Job Title e.g. Assistant Manager"  
style="background-color:white; border: 
solid 1px #6E6E6E; height: 31px; font-size:16px; 
vertical-align:0px;color:#bbb" 
onfocus="if(this.value == 'Job Title e.g. Assistant Manager'){this.value = 
'';this.style.color='#000'}" />

Thanks!

James

回答1:

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;
}

回答2:

You simply add:

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



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

cheers!

回答3:

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;
}

来源：https://stackoverflow.com/questions/7648898/how-to-get-rid-of-blue-outer-border-when-clicking-on-a-form-input-field