这是唯一对我有效的办法

边界实际上是一个影子。所以为了隐藏它，我不得不这样做:

input[type="text"]:focus{
     box-shadow: 0 0 0 rgb(255, 255, 255);
}

 input[type="checkbox"]:focus{
      box-shadow: 0 0 0 rgb(255, 255, 255);
 }

你也可以试试这个

input[type="text"] {
outline-style: none;
}

or

.classname input{
outline-style: none;
}

在你这样做之前，请记住焦点轮廓是一个可访问性和可用性特性;它提示用户当前关注的元素是什么，许多用户依赖于它。你需要找到其他方法让焦点可见。

在你的情况下，试试:

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

或者一般来说，影响所有基本的形式元素:

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

在评论中，Noah Whitmore建议进一步支持将contentteditable属性设置为true的元素(有效地使它们成为一种输入元素)。以下也应该针对这些(在支持CSS3的浏览器中):

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

虽然我不建议这样做，但为了完整性，你可以这样禁用所有的焦点轮廓:

*:focus {
    outline: none;
}

试试这个css，它为我工作

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

这让我困惑了一段时间，直到我发现这条线既不是边界也不是轮廓，它是阴影。所以要移除它，我必须使用这个:

input:focus, input.form-control:focus {

    outline:none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

你可以使用CSS来禁用它! 这是我用来禁用蓝色边框的代码:

*:focus {
    outline: none;
}

这是一个实际的例子