1

In Chrome, I can set the background-color of a text input field and all that changes is the background color. In this way I can highlight fields that need to be paid attention to (make the background light red so that the user knows there's a mistake there). In Firefox, and I suspect other browsers, the background color is changed, but the text field also looks more plain. Inset shadows disappear and when focused on the field there's no blue glow around it. It just looks different.

Is there a way to highlight a text field without changing the look and feel of it in Firefox (and other similar browsers)?

UPDATE: Example code:

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

You can see the difference between the 2 text fields. Hovering and focusing on the normal text field feels native to the OS. But the text field with a red background isn't as good anymore.

Here's the jsfiddle link.

4

3 回答 3

0

不，我不这么认为。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 不会像边框/背景那样导致元素失去其默认样式。

于 2012-09-20T18:02:01.630 回答
0

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

于 2012-09-20T17:36:10.537 回答
0

这些人想出了一个解决方案。我建议你看看这个：http: //formalize.me/

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

你可以做一个光跑下来，像这样控制：http: //jsfiddle.net/uUp3g/1/

干杯

于 2012-09-20T18:19:53.173 回答