有意见
<input type="text" id="myTest" value="bla bla bla"/>
并这样做（使用 jQuery）
$('#myTest').select();
使用默认的深蓝色选择颜色选择“bla bla bla”。
现在，有什么方法可以使用 css 更改此颜色？ css3 可以使用例如更改选择
::-moz-selection {
background: #ffb7b7;
}
但这仅适用于其他元素中的文本，而不适用于 html 输入。
有什么想法吗？
/T
【问题讨论】：
在 Firefox（最新版本）中对我有用，但在 Webkit 中不起作用。这是一个测试：http://jsfiddle.net/Gp8Rr/
我在最新版本的 Chrome、Safari 和 Firefox 中对其进行了测试，只有 Firefox 可以正常工作。可能是一个错误，或者 Webkit 不允许您为其 UI 的那部分设置样式？
这里只是一个更新，更详细一点。 ::selection 是一个非标准的伪元素，这意味着即使most browsers support it 你也不能保证他们会继续这样做，或者新的浏览器会支持它。所以继续使用它，但不要让它对您网站的可用性至关重要。有关此主题的更多信息，请访问 MDN。
【讨论】：
我认为没有任何方法可以做到这一点。所选文本的颜色是在软件/操作系统级别决定的，并不是您可以使用 javascript 真正控制的。选择 api 页面http://api.jquery.com/select/ 提到了几个插件，它们会告诉您用户选择了哪些文本。我唯一能想到的尝试是当用户选择一些文本时，您删除他们选择的文本并插入相同的文本，标记在一个跨度中，以不同的颜色突出显示它。但是，他们仍然会在突出显示时看到蓝色...
【讨论】：
如果你手动选择你想要的，它对我有用。
<!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>
它不适用于您的 jQuery 函数，因为 jQuery 正在选择您的 <input /> 元素，而不是选择实际的文本。尝试类似上面的脚本。您应该会看到它工作正常。
【讨论】：
我很确定这是不可能的。我不久前研究了这个问题，最后使用 div 标签代替了输入，让它看起来像一个输入字段。这使我能够控制和更改所选文本的突出显示颜色。然后我将输入作为相应更新的隐藏字段。
这可能不是您要寻找的答案，但这就是我能够解决此问题的方法。
【讨论】：
这至少在我的 FF 7.0.1 上有效：
input::-moz-selection {
background-color: green;
}
【讨论】：
如何在样式表中设置外观，然后使用类似的东西：
< style >
.selected-look{color:somehex, border:; font-family:; background:;} // etc;
< / style>
$('#myTest').toggleClass('selected-look').select();
或$('#myTest').select().toggleClass('selected-look');
【讨论】：
对于我的输入，我在我的 css 文件中使用它：
input[type="text"] { /* css properties */}
“text”可以替换为“textarea”、“submit”...甚至可以与悬停效果一起使用，例如：
#area-restrita input[type='submit']:hover { background-color:#CCC; color:#FFF;}
希望对你有帮助。
【讨论】：
对于我的输入，我在我的 css 文件中使用它：
input[type="text"] { /* cssproperties */ }
“text”可以替换为“textarea”、“submit”...甚至可以用于悬停效果，例如：
#area-restrita input[type='submit']:hover {background-color:#CCC; color:#FFF;}
希望对你有帮助。
【讨论】：
这是你想要的吗？文本被选中后变为红色。
$("input").select(function(){
$("input").css("color","red");
});
【讨论】：