Html 输入上的怪异轮廓：聚焦

我正在为我的项目使用MaterializeCS，但我有一个问题。 我已经禁用了输入的大纲，但是输入在焦点上仍然显示一个奇怪的大纲

这是输入的css

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

---

我看这里没有问题，但我假设你想把大纲全部去掉

如果你提供更多的细节，我将能够给出更准确的答案，但从提供的gif来看，我首先想到的是，这个轮廓可能来自：活动状态

您可以删除裸元素上两种状态的轮廓，并查看这是否有一些影响：

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

如果这不能解决你的问题，请多给我一些双关语：我们会解决的

最好的， N

---

另外，在进一步检查后，我认为当您单击时，边界已设置。这也是为什么你的输入字段会移动一点，你能看到吗？请更新您的代码。这应该是微不足道的

这很可能是：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;
}