css - 在 Firefox 中突出显示 HTML 文本输入字段而不会丢失 native 外观

Question

在 Chrome 中，我可以设置文本输入字段的 background-color，所有改变的只是背景颜色。通过这种方式，我可以突出显示需要注意的字段(将背景设为红色，以便用户知道那里有错误)。在 Firefox 中，我怀疑在其他浏览器中，背景颜色发生了变化，但文本字段看起来也更加朴素。嵌入的阴影消失了，当聚焦在场上时，周围没有蓝色光晕。它只是看起来不同。

有没有一种方法可以在不改变 Firefox(和其他类似浏览器)中的外观的情况下突出显示文本字段？

更新:示例代码:

<ul>
<li><input type="text" style="background-color: red"/></li>
<li><input type="text"/></li>
</ul>

您可以看到 2 个文本字段之间的区别。将鼠标悬停并聚焦在普通文本字段上感觉是操作系统的原生功能。但是红色背景的文本字段不再那么好。

Here's the jsfiddle link .

Answer 1

我当时遇到了同样的问题，似乎如果你想改变背景颜色，你必须改变 Firefox 的边框样式，2px solid 和你选择的颜色。