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 に答える
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でテスト済み

<input />jQuery は実際のテキストを選択するのではなく、要素を選択しているため、jQuery 関数では機能しません。上記のスクリプトのようなものを試してください。あなたはそれが働いているのを見るはずです。

于 2010-11-02T12:34:27.643 に答える
2

これは、少なくとも私の FF 7.0.1 では機能します。

input::-moz-selection {
    background-color: green;
}
于 2011-10-24T21:24:17.423 に答える
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"] { /* cssproperties */ }

「テキスト」は「テキストエリア」、「送信」に置き換えることができます...ホバー効果でも機能します。例：

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

それが役立つことを願っています。

于 2011-03-15T00:59:00.807 に答える
-1

Is this what you want? The text turns red after it is selected.

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

于 2011-11-01T16:52:22.640 に答える
-1

私の入力では、css ファイルでこれを使用します。

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

「テキスト」は「テキストエリア」、「送信」に置き換えることができます...ホバー効果でも機能します。例：

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

それが役立つことを願っています。

于 2010-03-16T21:55:20.353 に答える