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

当一个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;

}

请记住,焦点轮廓是可访问性和可用性功能;它会提示用户当前所关注的元素。

以上是 如何删除输入文本元素上的边框突出显示 的全部内容, 来源链接: utcz.com/qa/400020.html

回到顶部