突出显示HTML文本输入字段，而不会丢失Firefox中的本机外观

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和你选择的颜色。

Answer 2

不，我不相信。 Opera具有与Firefox相同的行为。我提出的最佳解决方案是仅对元素设置样式，如果它们需要用户注意（元素具有焦点或包含无效数据）。

这是我用作Sass bootstrap的一部分：

@mixin background($image, $bgcolor) { background: $bgcolor url(#{$imagedir}#{$image}) no-repeat scroll right center }

input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]), textarea, select {
    font: inherit;
    // background-color background-image background-repeat background-attachment background-position

    &:required:valid, &:required:in-range {
        //border: 1px solid #0f0;

        &:focus { outline: 1px solid #0f0; @include background("tick.png", transparent); }
    }

    &:invalid, &:out-of-range {
        @include background("asterisk_orange.png", $required-bg);
        border: 1px solid $required-color;

        &:focus {
            background-image: url("#{$imagedir}exclamation.png"); outline: 1px solid $required-color;
        }
    }
}

这就是生成的CSS的样子：

input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]), textarea, select {
  font: inherit;
}
input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):required:valid:focus, input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):required:in-range:focus, textarea:required:valid:focus, textarea:required:in-range:focus, select:required:valid:focus, select:required:in-range:focus {
  outline: 1px solid #0f0;
  background: transparent url(icons/silk/tick.png) no-repeat scroll right center;
}
input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):invalid, input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):out-of-range, textarea:invalid, textarea:out-of-range, select:invalid, select:out-of-range {
  background: #fef8b4 url(icons/silk/asterisk_orange.png) no-repeat scroll right center;
  border: 1px solid red;
}
input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):invalid:focus, input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):out-of-range:focus, textarea:invalid:focus, textarea:out-of-range:focus, select:invalid:focus, select:out-of-range:focus {
  background-image: url("icons/silk/exclamation.png");
  outline: 1px solid red;
}
input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):focus + .tip, textarea:focus + .tip, select:focus + .tip {
  display: inline;
  position: absolute;
  border: 1px solid red;
  background: #fef8b4;
  margin: 0;
  padding: 2px .5em;
}

值得注意的是，对于Opera，outline不会导致元素丢失其边框/背景的默认样式。

Answer 3

这些家伙提出了一个解决方案。我建议您查看一下：http://formalize.me/

他们标准化了表单外观，因此表单元素在所有浏览器和操作系统中保持不变。

你可以轻轻一击并控制如下：http://jsfiddle.net/uUp3g/1/

干杯