浏览器输入文本选择颜色

Question

在一个使用 jQuery UI 和 jQx 的项目中，我们将用户选择的主题应用于所有表单字段并遇到了这个问题：

在输入（文本）字段中选择文本时，不同浏览器的背景颜色不同。我知道这是特定于浏览器/操作系统的，但它会导致这种奇怪：

铬

IE 8 和 9

如您所见，在 IE 中选择的文本可能会导致问题，因为选择背景颜色与元素的其余部分混合。 （为什么 IE 将这种颜色设置为白色超出了我的理解。）

我已经尝试过“changing text selection color”CSS 技巧，但它在任何地方都有效除了我想要改变的东西。

是否有一些巫术魔法或其他一些记录不充分的功能可以使 IE 的行为不像......它的行为方式？ （并希望 IE10 真的 sucks less。）

Answer 1

尽管这个问题已经很老了，但我在这里回答是为了拯救其他试图解决这个问题的人，认为这是不可能的。当我们偶然发现答案时，我们准备放弃并接受 Internet Explorer 的这种行为。

似乎 Internet Explorer 使用此突出显示方法在任何文本框中设置了颜色的样式中的选定文本 - 如果删除此属性，突出显示正常工作。

当我们将颜色属性移到它自己的类中并将这两个类应用于文本框时，我们偶然发现了答案。

以下将在 IE 中显示此文本选择突出显示：

<input type="text" id="uiSizeWidth" class="SizeInput">

.SizeInput {
    width: 70px;
    text-align: center;
    height: 30px;
    font-weight: bold;
    margin: 2px;
    color: #ef4915;
}

但这不会：

<input type="text" id="uiSizeWidth" class="SizeInput InputColor">

.SizeInput {
    width: 70px;
    text-align: center;
    height: 30px;
    font-weight: bold;
    margin: 2px;
}

.InputColor {
    color: #ef4915;
}

然后，您可以使用以下 CSS 将突出显示设置为任何样式：

::-moz-selection {
    color: #fff;
    background: #39f;
}