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是一个非标准的伪元素，这意味着即使most browsers support it您无法保证他们会继续这样做，或者新浏览器会支持它。所以继续使用它，但不要使它对您网站的可用性至关重要。在MDN上有关于此主题的更多内容。

Answer 2

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

Answer 3

如果你手动选择你想要的东西，它对我有用。

<!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>

在Firefox 4.0b6

中测试过

它不能与您的jQuery函数一起使用，因为jQuery正在选择您的<input />元素，而不是选择实际的文本。尝试类似上面的脚本。你应该看到它有效。

Answer 4

我很确定无法做到这一点。我一会儿看了这个，最后使用div标签代替输入，使它看起来像一个输入字段。这使我能够控制和更改所选文本的突出显示颜色。然后我将输入作为隐藏字段进行相应更新。

这可能不是你想要的答案，但这就是我能够解决这个问题的方法。

Answer 5

这至少在我的FF 7.0.1上起作用：

input::-moz-selection {
    background-color: green;
}

Answer 6

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

< style >

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

< / style>

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

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

Answer 7

对于我的输入，我在我的css文件中使用它：

input[type="text"] { /* css properties */}

“text”可以替换为“textarea”，“submit”...甚至可以使用悬停效果，例如：

#area-restrita input[type='submit']:hover { background-color:#CCC; color:#FFF;}

希望它可以提供帮助。

Answer 8

对于我的输入，我在我的css文件中使用它：

input[type="text"] { /* cssproperties */ }

“text”可以替换为“textarea”，“submit”......甚至可以使用悬停效果，例如：

#area-restrita input[type='submit']:hover {background-color:#CCC; color:#FFF;}

希望它可以提供帮助。

Answer 9

这是你想要的吗？选中后，文字会变为红色。

$("input").select(function(){ $("input").css("color","red"); });

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

9 个答案: