重点覆盖“用户代理样式表”

Question

我已经阅读了许多文章并尝试了很多事情，但是我似乎没有一种嵌入表格可以按照我需要的方式工作。

焦点上出现输入的问题：

1。蓝色轮廓>我尝试了下面的似乎可以使用的代码，然后突然停止了工作。

input:-webkit-autofill:focus {
    outline: none !important;
}

2。黄色背景>我用下面的代码解决了这个问题。

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #ffefef inset !important;
}

I would like the form to always look like this (normal, hover, focus, active

但是由于“用户代理样式表”，事实并非如此。

您可以看到form in live here →

还要注意，我不是程序员。我对WordPress非常了解，但是任何棘手的答案都可能使我感到困惑。我想使用.css或在header / footer元素中添加一些JavaScript代码来解决此问题。

我还尝试了Normalize.css，我想我可以将它添加到同名的主题文件夹中，请原谅我的无聊。如果是这样，那没有帮助。好吧，我不知道是否应该在此处添加新行。

我们将不胜感激（祈祷）。

Answer 1

好吧，是否可以使用all: unset;删除所有默认的userAgent样式？对我有用。

但是，如果您只想删除轮廓，则应这样做 input { outline: none; }。希望有帮助。

编辑：all: unset可以删除所有user Agent Stylesheet。没什么。

Answer 2

#drip-first-name:focus, #drip-email:focus {
    outline: 0;
    border-bottom: 3px solid black !important;
}

确保为不同的浏览器添加前缀（不确定是否需要），当然对于active等也使用相同的前缀（无论何时获得蓝色轮廓）。这将适用于Chrome。

但是，有一些注意事项。由于您搞砸了CSS，因此需要开始使用Chrome Devtools。它是免费的，并内置于chrome中。这将向您显示出什么问题以及如何解决。

第二，在CSS中使用!important不是主要的问题，但您的border-bottom规则不起作用的原因是因为您在上一课中已经使用过!important正在捡起来。 “重要”不允许您覆盖任何内容，除非它在CSS样式表中较低并且也被标记为“重要”。长话短说，在某些时候，如果您继续使用重要内容，则必须重做整个事情。

这是打开devtools时的样子：

这是您开始使用devtools的链接： Devtools

Answer 3

将outline:0应用于输入普通样式而不是:hover或焦点，然后将其删除 来自输入border-width: inherit !important;的{​​{1}}，因为它采用了父边界的宽度，即:focus，因此边界消失了。