26

有输入

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

并这样做（使用jQuery）

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

导致使用默认的深蓝色选择颜色选择“bla bla bla”。

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

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

但这仅适用于其他元素中的文本，不适用于 html 输入。

有任何想法吗？

/T

4

9 回答 9

9

在 Firefox（最新版本）中对我有用，但在 Webkit 中不起作用。这是一个测试：http: //jsfiddle.net/Gp8Rr/

我在最新版本的 Chrome、Safari 和 Firefox 中对其进行了测试，而 Firefox 是唯一有效的。也许是一个错误，或者 Webkit 不允许您为其 UI 的那部分设置样式？

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

于 2011-10-31T19:14:04.937 回答
6

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

于 2010-03-09T23:47:46.097 回答
4

如果您手动选择所需的内容，它对我有用。

<!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 />元素，而不是选择实际的文本。尝试类似上面的脚本。你应该看到它工作。

于 2010-11-02T12:34:27.643 回答
2

这至少在我的 FF 7.0.1 上有效：

input::-moz-selection {
    background-color: green;
}
于 2011-10-24T21:24:17.423 回答
2

我很确定这是不可能的。我不久前研究了这个问题，最后使用 div 标签代替了输入，让它看起来像一个输入字段。这使我能够控制和更改所选文本的突出显示颜色。然后我将输入作为相应更新的隐藏字段。

这可能不是您要寻找的答案，但这就是我能够解决该问题的方法。

于 2011-10-23T22:15:15.420 回答
0

如何在样式表中设置外观，然后使用类似的东西：

< style >

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

< / style>

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

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

于 2009-10-23T04:28:37.980 回答
-1

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

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

“文本”可以替换为“文本区域”、“提交”......甚至可以与悬停效果一起使用，例如：

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

希望它可以提供帮助。

于 2010-03-16T21:55:20.353 回答
-1

这是你想要的吗？文本被选中后变为红色。

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

于 2011-11-01T16:52:22.640 回答
-1

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

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

“文本”可以替换为“文本区域”、“提交”......甚至可以使用悬停效果，例如：

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

希望它可以提供帮助。

于 2011-03-15T00:59:00.807 回答