jQuery 设置输入类型的选择颜色=文本，可能吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1599585/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Styling the selection color of an input type=text, possible?
提问by Tommy
Having an input
有输入
<input type="text" id="myTest" value="bla bla bla"/>
and doing this (using jQuery)
并这样做（使用jQuery）
$('#myTest').select();
causes "bla bla bla" to be selected with default dark blue selection color.
导致使用默认的深蓝色选择颜色选择“bla bla bla”。
Now, is there any way I can change this color using css? css3 can change selection using for instance
现在，有什么办法可以使用 css 更改这种颜色吗？css3 可以使用例如更改选择
::-moz-selection {
background: #ffb7b7;
}
but this only works on text in other elements, not in html inputs.
但这仅适用于其他元素中的文本，而不适用于 html 输入。
Any ideas?
有任何想法吗？
/T
/T
回答by Timothy Miller
Works for me in Firefox (latest version) but it doesn't work in Webkit. Here's a test: http://jsfiddle.net/Gp8Rr/
在 Firefox（最新版本）中对我有用，但在 Webkit 中不起作用。这是一个测试：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?
我在最新版本的 Chrome、Safari 和 Firefox 中对其进行了测试，而 Firefox 是唯一有效的。也许是一个错误，或者也许 Webkit 不允许你设计他们 UI 的那部分？
Just an updatehere, to go into a little more detail. ::selectionis a non-standard pseudo-element, which means that even though most browsers support ityou 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.
只是在这里更新，以了解更多细节。::selection是一个非标准的伪元素，这意味着即使大多数浏览器支持它，你也不能保证它们会继续这样做，或者新的浏览器会支持它。所以继续使用它，但不要让它对您网站的可用性至关重要。在MDN上有更多关于这个主题的信息。
回答by Finbarr
I do not think there is any way to do this. The color of selected text is decided at the software/os level and is not something you can really control with javascript. The select api page http://api.jquery.com/select/mentions several plugins that will tell you what text the user has selected. The only thing I can think of trying is when the user selects some text, you remove the text they have selected and insert the same text, marked up in a span that will highlight it in a different color. However, they will still see the blue as they are highlighting...
我不认为有任何方法可以做到这一点。所选文本的颜色是在软件/操作系统级别决定的，并不是您可以使用 javascript 真正控制的。选择 api 页面http://api.jquery.com/select/提到了几个插件，它们会告诉您用户选择了哪些文本。我唯一能想到的尝试是当用户选择一些文本时，您删除他们选择的文本并插入相同的文本，在一个跨度中标记，以不同的颜色突出显示它。但是，当他们突出显示时，他们仍然会看到蓝色......
回答by ssice
It works for me if you select what you want manually.
如果你手动选择你想要的东西，它对我有用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<style type="text/css">
p::-moz-selection, input::-moz-selection, textarea::-moz-selection {
color: red;
background-color: grey;
}
</style>
<script type="text/javascript">
window.onload = function() {
var message = document.getElementById('itext');
// Select a portion of text
createSelection(message,3, 10);
// get the selected portion of text
var selectedText = message.value.substring(message.selectionStart, message.selectionEnd);
};
function createSelection(field, start, end) {
if( field.createTextRange ) {
var selRange = field.createTextRange();
selRange.collapse(true);
selRange.moveStart('character', start);
selRange.moveEnd('character', end);
selRange.select();
} else if( field.setSelectionRange ) {
field.setSelectionRange(start, end);
} else if( field.selectionStart ) {
field.selectionStart = start;
field.selectionEnd = end;
}
field.focus();
}
</script>
</head>
<body>
<p>This paragraph is selection-aware.</p>
<form action="#">
<input type="text" id="itext" value="So is this input[text]" />
<textarea id="itextarea">And this textarea, as well</textarea>
</form>
</body>
</html>
Tested in Firefox 4.0b6
It is not working with your jQuery function because jQuery is selecting your <input />element, instead of selecting the actual text. Try something like the script above. You should see it working.
它不适用于您的 jQuery 函数，因为 jQuery 正在选择您的<input />元素，而不是选择实际文本。尝试类似上面的脚本。你应该看到它在工作。
回答by uadrive
I'm pretty sure this can't be done. I looked into this a while back and ended up using a div tag in place of an input and made it look like an input field. That allowed me to control and change the highlighted color of the selected text. Then I just had the input as a hidden field that updated accordingly.
我很确定这是做不到的。不久前我研究了这个，最终使用 div 标签代替输入，并使它看起来像一个输入字段。这允许我控制和更改所选文本的突出显示颜色。然后我只是将输入作为隐藏字段进行相应更新。
This probably isn't the answer you were looking for, but that was how I was able to work around the issue.
这可能不是您正在寻找的答案，但这就是我能够解决该问题的方式。
回答by Lycha
This does work at least on my FF 7.0.1:
这至少适用于我的 FF 7.0.1：
input::-moz-selection {
background-color: green;
}
回答by rydordy
How about setting up the look in the style sheet and then using something like:
如何在样式表中设置外观，然后使用以下内容：
< style >
.selected-look{color:somehex, border:; font-family:; background:;} // etc;
< / style>
$('#myTest').toggleClass('selected-look').select();
or $('#myTest').select().toggleClass('selected-look');
或者 $('#myTest').select().toggleClass('selected-look');
回答by kevin
For my inputs i use this in my css files:
对于我的输入，我在我的 css 文件中使用它：
input[type="text"] { /* css properties */}
input[type="text"] { /* css properties */}
the "text" can be replaced with "textarea", "submit"... even works with hover effects, exemple:
"text" 可以替换为 "textarea", "submit" ... 甚至适用于悬停效果，例如：
#area-restrita input[type='submit']:hover { background-color:#CCC; color:#FFF;}
Hope it can help.
希望它能有所帮助。
回答by Jon
For my inputs i use this in my css files:
对于我的输入，我在我的 css 文件中使用它：
input[type="text"] { /* cssproperties */ }
the "text" can be replaced with "textarea", "submit"... even works with hover effects, example:
“text”可以替换为“textarea”、“submit”……甚至可以使用悬停效果，例如：
#area-restrita input[type='submit']:hover {background-color:#CCC; color:#FFF;}
Hope it can help.
希望它能有所帮助。
回答by RickjS
Is this what you want? The text turns red after it is selected.
这是你想要的吗？文本被选中后变为红色。
$("input").select(function(){
$("input").css("color","red");
});
$("input").select(function(){
$("input").css("color","red");
});
