对输入类型=文本的选择颜色进行样式化，可能？ [英] Styling the selection color of an input type=text, possible?

问题描述

有输入

 < input type =textid =myTestvalue =bla bla bla /> 
  

并执行此操作（使用jQuery）

  $（'＃myTest'）。select（）; 
  

会使用默认深蓝色选择颜色选择bla bla bla。

现在，有没有办法我可以使用CSS改变这种颜色？ css3可以改变选择使用例如

  ::  -  moz-selection {
 background：＃ffb7b7; 
} 
  

但这只适用于其他元素的文本， / p>

任何想法？

/ T

解决方案

适用于Firefox（最新版本），但它不工作在Webkit。这里是一个测试： http://jsfiddle.net/Gp8Rr/

我在最新版本的Chrome，Safari和Firefox中测试了它，而且Firefox是唯一的工作。也许是一个错误，或者Webkit不允许你为他们UI的那部分风格。

---

>更新，进入更多细节。 :: selection 是一个非标准伪元素，这意味着即使大多数浏览器都支持它，你不能保证他们会继续这样做，或者新的浏览器会支持它。所以请继续使用它，但不要使你的网站的可用性。在 MDN 上有更多关于此主题的内容。

Having an input

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

and doing this (using jQuery)

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

causes "bla bla bla" to be selected with default dark blue selection color.

Now, is there any way I can change this color using css? css3 can change selection using for instance

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

but this only works on text in other elements, not in html inputs.

Any ideas?

/T

解决方案

Works for me in Firefox (latest version) but it doesn't work in Webkit. Here's a test: http://jsfiddle.net/Gp8Rr/

I tested it in latest versions of Chrome, Safari, and Firefox, and Firefox was the only one that worked. Maybe a bug, or maybe Webkit doesn't allow you to style that part of their UI?

---

Just an update here, to go into a little more detail. ::selection is a non-standard pseudo-element, which means that even though most browsers support it you have no guarantee that they will continue to do so, or that new browsers will support it. So go ahead and use it, but don’t make it essential to the useability of your site. There’s more on this topic over at the MDN.

这篇关于对输入类型=文本的选择颜色进行样式化，可能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！