この質問のための非常に単純なサンプルHTMLを次に示します。
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<p>stuff</p>
<p>more stuff</p>
<label>Test</label>
<select>
<option>Option 1 Here</option>
<option>Option 2 Here</option>
<option>Option 3 Here</option>
<option>Option 4 Here</option>
<option>Option 5 Here</option>
<option>Option 6 Here</option>
<option>Option 7 Here</option>
</select>
<p>other stuff</p>
</body>
</html>
Windows7のFirefox12.0では、カーソルを囲んでテキストを強調表示すると<select>、オプションも強調表示されます。
この動作は、IE9やChromeなど、私がテストした他の最新のブラウザーでは発生しません。
基本的に、周囲のテキストの強調表示を許可したいのですが、Firefoxのようにselectのオプションの強調表示を許可したくありません。
ハイライトを無効にすることを含むこの答えを見つけました。私は最初にそれを次のように試しました：
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
これにより、ハイライトを無効にすることに成功しました<select>が、他にハイライトできないものはありません。
CSSルールの範囲を次のように狭めようとしました。
select, select option {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
ただし、次のスクリーンショットに示すように、これは機能しませんでした。firebugは、ルールが<select>要素に適用されたと述べていますが、強調表示は引き続き許可されます。
通常、それは大したことではありませんが、これは、<div>スクロール中に選択を強調表示するのに不注意に役立つ多くのスクロール要素に依存する、より大きなアプリケーションからの小さな一口です。ただし、ユーザーがテキストをまったく選択できないという解決策は必要ありません。これは、ユーザーが慣れ親しんだ経験ではないためです。
