CODEWITHSUNDEEP
javascriptjqueryhtml
Malasorte
Malasorte

Reputation: 1173

Hover color inside select box

By using Jquery, I am trying to change the hover color inside a select box from the default blue to red. I know that hover color of the select input is operating system dependent not browser dependent, but I am getting close to the desired effect.

My code below works only if I define a size for select. Does nothing for a simple select. And I just can't get it why...

JSFiddle: http://jsfiddle.net/7bP2W/1/

Code:

 $(document).ready(function(event) {
    $('select').on('mouseenter','option',function(e) {
      $(this).css({ "background-color": "red", "color": "white"});
    });

    $('select').on('mouseout','option',function(e) {
      $(this).css({ "background-color": "white", "color": "black"});
    });

});

Tested in the latest versions of Chrome, Firefox, and Opera. Does not work in IE11.

Upvotes: 2

Views: 1300

Answers (2)

John
John

Reputation: 889

Unfortunately, you cannot change the styles for these elements! <select>or <option>. They are HTML tags and are rendering itself the time of webpage load.

Upvotes: 0

royhowie
royhowie

Reputation: 11171

You are indeed correctly that selects are (annoyingly) operating system dependent, for understandable (yet still annoying) reasons. The above solution requires that you still define a size, however.

There is no reason to alter a simple select without some tricks. If you really want to make sure your selects are styled in another matter, it may be worthwhile looking into Chosen, a jQuery plugin for select boxes.

What they do is change the selects into divs and spans that are styled to look like a select. For example:

<div class="chosen-container chosen-container-single" style="width: 350px;" title="">
    <a class="chosen-single chosen-default" tabindex="-1">
        <span>Choose a Country...</span>
        <div>
            <b></b>
        </div>
    </a>
    <div class="chosen-drop">
        <div class="chosen-search">
            <input type="text" autocomplete="off" tabindex="2">
        </div>
        <ul class="chosen-results"></ul>
    </div>
</div>

The plugin is then used to add functionality and style it to look better.

Regardless, what you have now is probably the most you'll be able to accomplish without a plugin like Chosen (unless you choose to build it yourself).

Upvotes: 1

Related Questions