关于输入的奇怪轮廓：焦点

Question

我在我的项目中使用materializecss但我遇到了问题。 我已经禁用了输入的轮廓，但输入仍然显示焦点的奇怪轮廓。

这是输入的css

.inputs input[type=text]:focus {
  border: 1px solid #FFFFFF!important;
  background-color: #FAFAFA!important;
  box-shadow: none!important;
  outline:none!important;
}

Answer 1

这可能是：active伪类，因为点击时边框似乎正在改变。

尝试制定一个更改焦点和活动伪类的规则。

.inputs input[type=text]:active,
.inputs input[type=text]:focus {
  border: 1px solid #FFFFFF!important;
  background-color: #FAFAFA!important;
  box-shadow: none!important;
  outline:none!important;
}

Answer 2

我在这里没有看到任何问题，但我想你想完全摆脱这个大纲？

如果您提供更多详细信息，我将能够给出更准确的答案，但是首先要看到提供的gif，可能是因为该大纲来自：活跃状态。

您可以删除裸元素上两种状态的大纲，看看是否有一些影响：

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

如果这不能解决你的问题，请提供一些更多的意见（双关语:)）我们会弄明白的。

最佳， Ñ

P.S。经过进一步检查，在我看来，当您单击时，边框已设置。这也是你输入字段移动一点的原因（你能看到）吗？请更新您的代码。这应该是微不足道的。