重複している可能性があります:
テキスト選択ハイライトを無効にするためのCSSルール
私はHTML/CSS/jQueryギャラリーをいくつかのページで作っています。
私は確かに "次へ"ボタンを持っています、それはjQueryクリックリスナーとの単純なリンクです。
問題は、ユーザーがボタンを数回クリックすると、ボタンのテキストが選択され、次にテキスト全体が選択されることです。私の本当に暗いデザインでは、それは本当に醜く無意味です。
だからここに私の質問です:あなたはHTML上のテキスト選択を無効にすることはできますか?そうでなければ、私はフラッシュとテキストフィールドの設定の高レベルを見逃してしまいます...
<div
style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;"
unselectable="on"
onselectstart="return false;"
onmousedown="return false;">
Blabla
</div>
更新2017年1月:
私は使用できます によると、user-select
は現在Internet Explorer 9以前のバージョンを除くすべてのブラウザでサポートされています(しかし残念ながらまだベンダーのプレフィックスが必要です)。
正しいCSSのバリエーションはすべて次のとおりです。
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}
<p>
Selectable text.
</p>
<p class="noselect">
Unselectable text.
</p>
これは非標準の機能です(つまり、どの仕様にも含まれていません)。すべての場所で動作することが保証されているわけではなく、ブラウザ間で実装に違いがある可能性があり、将来的にはブラウザはそれをサポートしなくなる可能性があります。
より詳しい情報は Mozilla Developer Networkのドキュメント にあります。
ブラウザ間の互換性のためにこのCSSコードを試してください。
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
JavaScriptを使ってあなたが望むことをすることができます:
if (document.addEventListener !== undefined) {
// Not IE
document.addEventListener('click', checkSelection, false);
} else {
// IE
document.attachEvent('onclick', checkSelection);
}
function checkSelection() {
var sel = {};
if (window.getSelection) {
// Mozilla
sel = window.getSelection();
} else if (document.selection) {
// IE
sel = document.selection.createRange();
}
// Mozilla
if (sel.rangeCount) {
sel.removeAllRanges();
return;
}
// IE
if (sel.text > '') {
document.selection.empty();
return;
}
}
Soap box:あなたは本当にこの方法でクライアントのユーザーエージェントに悩むべきではありません。クライアントが文書上のものを選択したい場合は、文書上のものを選択できるはずです。 あなたがハイライトカラーを好まないかどうかは関係ありません。なぜなら、あなたはドキュメントを表示しているのではないからです。
無効にできるかどうかはわかりませんが、色を変更できます。
myDiv::selection,
myDiv::-moz-selection,
myDiv::-webkit-selection {
background:#000;
color:#fff;
}
それから色をあなたの「暗い」デザインに合わせて、何が起こるのか見てください:)