2009-10-21 16 views
25

入力タイプの選択色のスタイル=テキスト、可能ですか?

入力

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

を持ち、これを(jQueryを使用して)実行すると、デフォルトのダークブルー選択色で "bla bla bla"が選択されます。

今、CSSを使ってこの色を変更する方法はありますか? css3は、例えば

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

を使用して選択を変更できますが、これはhtml入力ではなく他の要素のテキストでのみ機能します。

どんなアイデアですか?

/T

+1

あなたは何かを見つけた場合は、このオープン質問アップデートしてください:私は、これは選択にどのように影響するかが表示されないhttp://stackoverflow.com/questions/2043695/textareaselection-and-moz-selection –

答えて

0

。選択されたテキストの色は、ソフトウェア/ OSレベルで決定され、実際にはJavaScriptで制御できるものではありません。 select apiページhttp://api.jquery.com/select/には、ユーザーが選択したテキストを示すプラグインがいくつか記載されています。私が試して考えることができる唯一のことは、ユーザーがテキストを選択し、選択したテキストを削除し、同じテキストを挿入し、別の色でハイライトするスパンでマークアップすることです。彼らは私の入力の場合...

+0

を入力フィールドの選択色(type = text)? – Tommy

6

私はこれを行うにはどのような方法があるとは思わない:スタイルシート内のルックを設定し、その後のようなものを使用することについてどのように

/T

-1

を強調しているようしかし、彼らはまだ私は私のcssファイルでこれを使う青が表示されます。

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

「テキストは」テキストエリア「に置き換えることができます"、"提出する "...ホバー効果でも動作します。例:

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

希望すると助かります。

4

あなたが手動で何を選択するかは、私のために働きます。 Firefox 4.0b6

でテスト

<!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のあなたの<input />要素を選択しているので、あなたのjQueryの機能を扱うのではなく、実際のテキストを選択されていません。上のスクリプトのようなものを試してみてください。それは動作しているはずです。私は私のcssファイルでこれを使用して、私の入力の場合

-1

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

「テキスト」は「テキストエリア」に置き換えることができ、「提出」を...でもホバー効果で動作し、例:

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

希望します。

2

私はこれができないと確信しています。私はこれを少し前に見て、入力の代わりにdivタグを使い、入力フィールドのように見せました。これにより、選択したテキストの強調表示された色を制御して変更することができました。それから、私はちょうどそれに応じて更新された隠しフィールドとして入力を持っていました。

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

2

これは、少なくとも私のFF 7.0.1の作業を行います。

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

のFirefox(最新版)での私の作品が、それはWebkitのでは動作しませんが。ここにテストがあります:http://jsfiddle.net/Gp8Rr/

私はChrome、Safari、Firefoxの最新バージョンでそれをテストしましたが、Firefoxは唯一のものでした。おそらくバグか、WebkitではUIのその部分をスタイルすることはできません。


ただ、ここ更新は、もう少し詳細に移動します。 ::selectionは標準ではない擬似要素です。つまり、most browsers support itが保証を継続しても、新しいブラウザでサポートされるという保証はありません。だから、それを使用してください、しかし、あなたのサイトの有用性に不可欠ではありません。このトピックについては、MDNをご覧ください。

+1

2015年までに、これはIE9 +、Chrome、Safari、Firefoxなどの[多くのブラウザでサポートされています](http://caniuse.com/#feat=css-selection)と思われます。渡している人には、私はこれが受け入れられた答えであるべきだと言います。 – aug

-1

これはあなたが望むものですか?テキストが選択されると、赤色に変わります。

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

関連する問題