以下是一些非常简单的示例 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>
在 Windows 7 上的 Firefox 12.0 上，当您使用围绕 的光标突出显示文本时<select>，选项也会突出显示。
这种行为在我测试过的其他现代浏览器中不会发生，例如 IE9 和 Chrome。
基本上，我想允许突出显示周围的文本，但我不想像 Firefox 那样允许突出显示选择中的选项。
我发现这个答案涉及禁用突出显示。我一开始尝试如下：
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;
}
但是，这不起作用，如以下屏幕截图所示。尽管萤火虫声明该规则已应用于<select>元素，但仍允许突出显示。
通常这没什么大不了的，但这是来自大型应用程序的一个小花絮，它依赖于许多滚动<div>元素，这些元素在滚动时会无意中突出显示选择。不过，我不想要一个涉及用户根本无法选择任何文本的解决方案，因为这不是他们习惯的体验。
