input:focus 上的奇怪轮廓

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

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

如果您提供更多详细信息，我将能够给出更准确的答案，但从提供的 gif 中首先想到的是，该轮廓可能来自 :active 状态。

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

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

如果这不能解决您的问题，请提供更多信息（双关语:)），我们会解决的。

最好的， N.

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

Answer 2

这可能是 :active 伪 class，因为当您单击时，边框似乎在变化。

尝试制定一个规则，同时更改焦点和活动伪 classes。

.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;
}

input:focus 上的奇怪轮廓

Weird outline on input:focus

html

css

focus

input