如何删除输入文本元素上的边框突出显示

2018-06-21 23:47:19

当一个html元素被“聚焦”（当前选中/选中）时，许多浏览器（至少Safari和Chrome）都会在其周围放置一个蓝色边框。

对于我正在处理的布局，这是分散注意力的，看起来不正确。

<input type="text" name="user" class="middle" id="user" tabindex="1" />

FireFox似乎没有这样做，或者至少会让我控制它

border: x;

如果有人能告诉我IE如何执行，我会好奇的。

但让Safari删除这一点耀斑会很好。

谢谢

在你的情况下，尝试：

input.middle:focus {
    outline-width: 0;
}

或者一般来说，要影响所有基本的表单元素：

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

在评论中，Noah Whitmore建议进一步支持将contenteditable属性设置为true元素（使其成为一种输入元素）。以下内容也应该针对这些（在支持CSS3的浏览器中）：

[contenteditable="true"]:focus {
    outline: none;
}

虽然我不会推荐它，但为了完整起见，您可以始终禁用以下所有内容 ：

*:focus {
    outline: none;
}

请记住，重点大纲是一种可访问性和可用性功能; 它会为用户提供当前所关注的元素。

将其从所有输入中删除

input {
 outline:none;
}

这是一个旧线程，但为了便于参考，需要注意的是不建议禁用输入元素的轮廓，因为它会妨碍可访问性。

outline属性出于某种原因 - 为用户提供键盘焦点的明确指示。有关此主题的更多阅读和其他资源，请参阅http://outlinenone.com/。

链接地址: http://www.djcxy.com/p/61723.html