web-dev-qa-db-ja.com

入力type = textの選択色のスタイリングは可能ですか？

入力がある

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

そしてこれを行う（jQueryを使用）

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

「blablabla」がデフォルトのダークブルーの選択色で選択されます。

さて、cssを使用してこの色を変更する方法はありますか？ css3は、たとえばを使用して選択を変更できます

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

ただし、これは他の要素のテキストでのみ機能し、HTML入力では機能しません。

何か案は？

/ T

jqueryhtmlcssselection
26
Tommy

Firefox（最新バージョン）では動作しますが、Webkitでは動作しません。テストは次のとおりです。 http://jsfiddle.net/Gp8Rr/

Chrome、Safari、Firefoxの最新バージョンでテストしましたが、動作したのはFirefoxだけでした。バグかもしれませんし、WebkitではUIのその部分のスタイルを設定できないのでしょうか？

ここではupdateだけで、もう少し詳しく説明します。 ::selectionは非標準の疑似要素です。つまり、 ほとんどのブラウザがサポートしている であっても、引き続きサポートする、または新しいブラウザがサポートするという保証はありません。したがって、先に進んでそれを使用しますが、サイトのユーザビリティに不可欠なものにしないでください。このトピックの詳細については、 [〜＃〜] mdn [〜＃〜] をご覧ください。

9
Timothy Miller

これを行う方法はないと思います。選択したテキストの色はソフトウェア/ OSレベルで決定され、javascriptで実際に制御できるものではありません。 select apiページ http://api.jquery.com/select/ は、ユーザーが選択したテキストを示すいくつかのプラグインについて言及しています。私が試すことができる唯一のことは、ユーザーがテキストを選択したときに、選択したテキストを削除して同じテキストを挿入し、スパンでマークアップして別の色で強調表示することです。ただし、強調表示されているため、青は引き続き表示されます...

6
Finbarr

あなたが手動で欲しいものを選択するならば、それは私のために働きます。

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

4
ssice

私はこれができないと確信しています。しばらく前にこれを調べて、入力の代わりにdivタグを使用して、入力フィールドのように見せました。これにより、選択したテキストの強調表示された色を制御および変更することができました。次に、それに応じて更新される非表示フィールドとして入力を取得しました。

これはおそらくあなたが探していた答えではありませんが、それが私が問題を回避することができた方法でした。

2
uadrive

これは少なくとも私のFF7.0.1では機能します：

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

スタイルシートで外観を設定してから、次のようなものを使用するのはどうですか。

_< style >

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

< / style>

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

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

0
rydordy