如何清除文本/输入框周围的边框（轮廓）？ （铬） [英] How to remove border (outline) around text/input boxes? (Chrome)

问题描述

任何人都可以解释如何清除文字/输入框周围的橙色或蓝色边框（轮廓）？我认为只有在Chrome上才会显示输入框处于活动状态。这里是我使用的输入CSS：

Can anyone explain how to remove the orange or blue border (outline) around text/input boxes? I think it only happens on Chrome to show that the input box is active. Here's the input CSS I'm using:

input {
    background-color: transparent;
    border: 0px solid;
    height: 20px;
    width: 160px;
    color: #CCC;
}

推荐答案

此边框用于显示元素（即，您可以键入输入或按Enter键）。您可以删除它：

This border is used to show that the element is focused (i.e. you can type in the input or press the button with Enter). You can remove it, though:

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

您可能想为用户添加一些其他方式，

You may want to add some other way for users to know what element has keyboard focus though for usability.

Chrome还会将突出显示应用于其他元素，例如用作模态的DIV。为了防止这些和所有其他元素的亮点，您可以：

Chrome will also apply highlighting to other elements such as DIV's used as modals. To prevent the highlight on those and all other elements as well, you can do:

*:focus {
    outline: none;
}

这篇关于如何清除文本/输入框周围的边框（轮廓）？ （铬）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！