可以设置输入类型=文本的选择颜色样式吗？

Question

有输入

<input type="text" id="myTest" value="bla bla bla"/>

这样做(使用jQuery)

$('#myTest').select();

使用默认的深蓝色选择颜色选择"bla bla bla".

现在,有什么办法可以用css改变这种颜色吗？css3可以使用例如更改选择

::-moz-selection {
  background: #ffb7b7;
}

但这仅适用于其他元素中的文本,而不适用于html输入.

有任何想法吗？

/ T

Answer 1

在Firefox(最新版本)中适用于我,但它在Webkit中不起作用.这是一个测试:http://jsfiddle.net/Gp8Rr/

我在Chrome,Safari和Firefox的最新版本中进行了测试,而Firefox是唯一有效的版本.也许是一个bug,或者Webkit不允许你设置他们UI的那一部分？

这里只是一个更新,更详细一点.::selection是一个非标准的伪元素,这意味着即使大多数浏览器都支持它,你也无法保证它们会继续这样做,或者新浏览器会支持它.所以继续使用它,但不要使它对您网站的可用性至关重要.在MDN上有关于此主题的更多信息.

Answer 2

我认为没有办法做到这一点.所选文本的颜色是在软件/操作系统级别决定的,而不是你可以用javascript真正控制的东西.select api页面http://api.jquery.com/select/提到了几个插件,它们会告诉你用户选择了哪些文本.我唯一能想到的尝试是当用户选择一些文本时,删除他们选择的文本并插入相同的文本,在跨度中标记,以不同的颜色突出显示它.然而,他们仍然会看到蓝色,因为他们突出显示...

Answer 3

如何在样式表中设置外观，然后使用以下内容：

< style >

.selected-look{color:somehex, border:; font-family:; background:;} // etc;

< / style>

$('#myTest').toggleClass('selected-look').select();

或者$('#myTest').select().toggleClass('selected-look');