单击表单输入字段时如何摆脱蓝色外边框？答案

【问题标题】：How to get rid of blue outer border when clicking on a form input field?单击表单输入字段时如何摆脱蓝色外边框？
【发布时间】：2011-11-30 17:23:08
【问题描述】：

您好，我想消除当您单击文本字段并开始输入数据时出现的蓝色“闪耀”。这是怎么做到的？

我是初学者，所以我没有那么有经验。我的代码是：

<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'}" />

谢谢！

詹姆斯

【问题讨论】：

标签： html forms textfield

【解决方案1】：

这个 CSS sn-p 应该适用于所有主流浏览器：

    input:focus {
        outline:none;
    }

如果没有，请尝试添加 !important 指令：

    input:focus {
        outline:none !important;
    }

【讨论】：

如果某些 div 是可点击的，那么 div:focus { outline: none; } 也可以消除蓝色轮廓。

【解决方案2】：

您可以在元素上使用以下样式属性来避免蓝色边框。

style="box-shadow: none;"

例如：在这里，我已经在我的按钮中使用了

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

【讨论】：

【解决方案3】：

如果您想要简单的解决方案并希望从完整的 html 中删除蓝色边框，请使用

*:focus {outline:none !important}

【讨论】：

【解决方案4】：

虽然它没有直接关系，但我在这里留下一个注释，因为这个 SO 页面是我搜索时出现的。此处列出的答案也适用于 html5 视频。就我而言，Chrome 中的视频下方显示了一个蓝色边框。

为了完整起见：

video 
{
  outline:none;
}

【讨论】：

【解决方案5】：

您只需添加：

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



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

干杯！

【讨论】：