How to disable highlighting on Hover?

Question

I have to disable highlighting effect of <select> of html. When you pull down items in drop down list and move mouse over items a blue color strip moves with mouse. I have to disable this effect.
Here is sample code

<select>
    <option>April</option>
    <option>May</option>
    <option>June</option>
</select>

Here is demo http://jsfiddle.net/Jams/5ZC3m/
Any CSS or Javascript solution is welcome.

Duplicate: http://stackoverflow.com/questions/1667086/html-changing-select-highlight-color — Cecchi, Jun 29 '12 at 00:20
Most of these things are handled by Browsers. I think you'd have to build you own custom dropdown box with jQuery and style it the way you want — astro boy, Jun 29 '12 at 00:28
This'll help you get started if you decide to build your own: http://jsfiddle.net/WFTvq/77/ — astro boy, Jun 29 '12 at 00:35

score 0 · Answer 1 · answered Jun 29 '12 at 00:20

0

It's just highlighted by the browser because it's active. I believe the only way to disable this is to literally disable the select box

<select disabled="disabled">

That would obviously remove all functionality.

answered Jun 29 '12 at 00:20

MultiDev

10,389
24
81
148

score 0 · Answer 2 · answered Jun 29 '12 at 01:08

In browsers that apply default styles using a default stylesheet, you should be able to override the default by identifying the appropriate style property and setting it to what you want. But it may be that some browsers either don't use a default style sheet, or don't allow you to override the settings.

Using a script-driven alternative is often a poor choice. Most do not correctly follow default browser behaviour, they just do what the developer thought was a good idea, breaking the UI for some users. e.g. when using keyboard navigation in Safari, the space bar is used to select options. Script-driven replacement select elements seem to be programmed to only accept the tab key for selecting options, so some users get a broken UI.

Why not just use the browser default? Why must you remove the highlighting? Users get used to their browser and how it works, messing with the UI is a developer thing that just makes life difficult for users. Incidentally, I'm not a fan if such highlighting (I hate the modern trend that everything the cursor touches must do something), but it's there so I leave it alone.

How to disable highlighting on Hover?

2 Answers2