时间戳

首页 > 解决方案 > 未应用 HTML 输入 CSS 背景颜色

html - 未应用 HTML 输入 CSS 背景颜色

问题描述

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

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

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

在此处输入图像描述

标签： htmlcss

解决方案

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

关于未应用背景颜色；实际上，正如我所见，输入是 50px 宽度，我在检查器中看到它是 50px 宽度，所以值周围的黑色是您设置的背景颜色。只有值周围有灰色。并且：由于设置 background-color !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 选择器集会改变颜色，在元素检查器中向下滚动以查看。它们通常位于底部。比如输入::有效

推荐阅读