outline：none在输入标签上不起作用[重复]

Question

此问题已经在这里有了答案：

关闭7年前。

可能重复：How come I can't remove the blue textarea border in Twitter Bootstrap?

每次进行搜索以摆脱输入字段上的突出显示都说要使用css：

input:focus {
    outline:none;
}

这根本不起作用。我正在使用最新版本的chrome，firefox和safari进行测试。

我也在使用Bootstrap CSS库，我不确定这是否会导致这种问题。

我试图达到的效果是在模拟控制台屏幕上出现空白行。我使它正常工作，并且看起来很完美，除了inout字段聚焦时的突出显示。

任何帮助将不胜感激。

Answer 1

不要将其附加到:focus伪事件。

input
{
    outline:none;
}

Answer 2

对我有用的解决方案

input, input:focus{
        position:absolute;
        width:auto;
        bottom:0px;
        padding:0px;
        margin:2px;
        background-color:#000000;
        color:#33FF00;
        border-width: 0px;
        outline:0; /* I have also tried outline:none */
        -webkit-appearance:none;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
}

特别是解决问题的基本CSS：

input, input:focus{
        border-width: 0px;
        outline:0; /* I have also tried outline:none */
        -webkit-appearance:none;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
}

我本来忘记将框阴影设置为无。

Answer 3

如果input{outline:none;}不起作用，请尝试：

input, input:focus{
  outline:0px !important;
  -webkit-appearance:none;
}

Answer 4

尝试这样：

input {
    outline:none;
}

在我的网站上为我工作。如果这对您不起作用，请尝试提供一个小提琴。