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

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

Answer 2

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

这是我在 Sass 引导程序中使用的：

@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/

干杯