Here’s some very simple sample HTML for purposes of this question:
<!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>
On Firefox 12.0 on Windows 7, when you highlight the text with the cursor surrounding the <select>, the options are also highlighted.
This behavior does not happen in other modern browsers I’ve tested, such as IE9 and Chrome.
Basically, I want to allow highlighting of surrounding text, but I never want to allow highlighting of options in the select as firefox is doing.
I found this answer involving disabling highlighting. I tried it at first as:
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
This succeeded in disabling highlighting on the <select> however, nothing else could be highlighted which is not preferred.
I attempted to narrow the scope of the CSS rule to:
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;
}
However, this did not work as can be seen in the following screen shot. Although firebug states the rule was applied to the <select> element the highlighting is still permitted.
Normally it wouldn’t be a big deal, but this is a small tidbit from a larger application that relies on many scrolling <div> elements that inadvertently lend to highlighting selects whilst scrolling. Though, I don’t want a solution that involves users not being able to select any text at all as that is not the experience they are used to.
Add this to your css: