CODEWITHSUNDEEP
htmlcssfirefoxwindows-7
user17753
user17753

Reputation: 3161

Fix to prevent Firefox from Highlighting Select Option set

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.

enter image description here

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.

enter image description here

Upvotes: 2

Views: 905

Answers (1)

iddo
iddo

Reputation: 749

Add this to your css:

option::-moz-selection { background: transparent; }

Upvotes: 2

Related Questions