Html 单击表单输入字段时如何摆脱蓝色外边框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7648898/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get rid of blue outer border when clicking on a form input field?
提问by James
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
詹姆士
回答by 2grit
This CSSsnippet should work in all major browsers:
这个CSS片段应该适用于所有主要浏览器：
input:focus {
outline:none;
}
If it doesn't, try adding the !importantdirective:
如果没有，请尝试添加!important指令：
input:focus {
outline:none !important;
}
回答by Davor Zubak
You simply add:
您只需添加：
<style type="text/css">
#hello:focus
{
outline:none;
}
</style>
<input type="text" id="hello"></input>
cheers!
干杯！
回答by Piyush Rajput
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>
回答by John Lee
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.
虽然它没有直接关系，但我在这里留下了一个注释，因为这个 SO 页面是我搜索中出现的。此处列出的答案也适用于 html5 视频。就我而言，Chrome 中的视频下方显示了一个蓝色边框。
For completeness sake:
为了完整起见：
video
{
outline:none;
}
回答by Chinmoy
If you want easy solution and want to remove blue border from complete html, use
如果您想要简单的解决方案并希望从完整的 html 中删除蓝色边框，请使用
*:focus {outline:none !important}
