HTML 输入 CSS 背景颜色未应用

Question

我对input[type=number]元素有一个奇怪的 CSS 行为，导致该集合background-color无法应用。该color样式已正确应用于输入的文本，并且 Chrome 的开发工具将背景颜色显示为在元素上处于活动状态，但实际输入值使用不同的背景颜色呈现（浅灰色而不是黑色 #000，如图所示） 。

有人经历过这种行为吗？是否有其他 CSS 属性可能导致此问题？

对此的任何建议或解决方案都非常感谢。提前致谢！

Answer 1

正如其他人评论的那样，我们只能根据此屏幕截图中有限的信息来猜测发生了什么，但我将列出一些可能的解释，您可以在代码中检查。

关于未应用背景颜色；实际上它的应用正如我所看到的：根据 css，输入的宽度是 50px，我在检查器中看到它的宽度是 50px，所以值周围的黑色是您设置的背景颜色。只有值周围有灰色。并且：由于设置背景颜色 !important 确实会覆盖背景颜色本身，因此它不会覆盖所有背景属性（例如，如果在其他地方声明了背景图像，则不会被覆盖）

因此，列出了可能的解释：

• 可以设置背景图片。
• 灰色背景可能是浏览器的预填充背景，当从存储的内存中自动完成输入值时会出现该背景。例如，Chrome 设置的背景通常为黄色（但在您的情况下可能为灰色）。您可以尝试通过以下方法查明是否属于这种情况：

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

• 输入可能在某处all: unset覆盖其他 css 声明
• 浏览器扩展可能会弄乱您的 html/css。在匿名选项卡中打开页面（通常禁用扩展）。
• 可能有一些 css ::pseudo 选择器集会更改颜色，请在元素检查器中向下滚动以查看。他们通常位于底部。例如输入::有效