2

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

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

铬合金

在此处输入图像描述

IE 8 和 9

在此处输入图像描述

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

我已经尝试过“改变文本选择颜色”的 CSS 技巧,但它在我试图改变之外的任何地方都有效。

是否有一些巫术魔法或其他一些记录不充分的功能可以使 IE 的行为不像......它的行为方式?(并希望 IE10真的不那么 糟糕。)

4

1 回答 1

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;
}
于 2014-07-31T14:27:35.043 回答