CODEWITHSUNDEEP
jquerycssfirefox
techlead
techlead

Reputation: 779

Changing the color of <option> in firefox

I'm trying to change the text color of the option that is selected. It's working in IE but not in Firefox.

<html>
   <head>
      <script type="text/javascript">
         $(document).ready(function(){
            $("option:selected").css("color", "green");
         });
      </script>
</head>
<body>
   <select id="mySelect">
      <option selected="selected">option 1</option>
      <option>option 2</option>
      <option>option 3</option>
   </select>
</body>
</html>

UPDATED

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
         <script type="text/javascript">
         $(document).ready(function(){
            $("select").css("color", "green").focus(function() {
                    $(this).css('color', 'black');
                }).blur(function() {
                $(this).css('color', 'green');
            });
         });
      </script>
</head>
<body>
   <select id="mySelect">
      <option selected="selected">option 1</option>
      <option>option 2</option>
      <option>option 3</option>
   </select>
</body>
</html>

UPDATED 2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
        <style type="text/css">
            select.green{
              color: green;
            }
            option {
              color: black;
            }
        </style>
        <script type="text/javascript">
            $(document).ready(function(){
                var green = $('option:selected', 'select').data('green');
                if (green) {
                    $('select').addClass('green');
                }
                $('select').change(function() {
                    var green = $('option:selected', this).data('green');
                    if (green) {
                        $('select').addClass('green');
                    }
                    else {
                        $('select').removeClass('green');
                    }
                });​
             });
        </script>
    </head>
    <body>
        <select id="mySelect">
            <option selected="selected" data-green="true">option 1</option>
            <option>option 2</option>
            <option>option 3</option>
        </select>
    </body>
</html>

Upvotes: 5

Views: 10413

Answers (3)

gen_Eric
gen_Eric

Reputation: 227270

So, you want the select to be green when "option 1" is selected, but not when the others are?

I suggest adding an attribute to "option 1", so you know that's one that should be green, and then toggle a class on the select when it's changed.

So, change your HTML to be this:

<select id="mySelect">
   <option selected="selected" data-green="true">option 1</option>
   <option>option 2</option>
   <option>option 3</option>
</select>​​​

Add this to your CSS:

select.green{
  color: green;
}
option {
  color: black;
}​

And try this JavaScript:

$(function(){
    var green = $('option:selected', 'select').data('green');
    if (green) {
        $('select').addClass('green');
    }


    $('select').change(function() {
        var green = $('option:selected', this).data('green');
        if (green) {
            $('select').addClass('green');
        }
        else {
            $('select').removeClass('green');
        }
    });​
});

DEMO: http://jsfiddle.net/UyxaT/3/

Upvotes: 0

MMM
MMM

Reputation: 7310

This might not be the solution you are looking for but you can do that in css:

option[selected] {
    color: green;
}

This only works with browsers that support attribute selectors (IE7+)

EDIT: After reading your comment I understand what you want to achieve. You want to make the select green AND the selected element (option) green (and the rest to black). You can do this by using the following css code:

select {
  color: green;
}

option[selected] {
  color: green;
}

option {
  color: black;
}

​See my JSFiddle. However the colours won't change after you select a different option.

Upvotes: 6

Leniel Maccaferri
Leniel Maccaferri

Reputation: 102418

Take a look here:

http://benalman.com/code/projects/jquery-misc/examples/selectcolorize/

By default, select elements in Internet Explorer and Opera show the selected option's color and background color, while Firefox and WebKit browsers do not. jQuery selectColorize normalizes this behavior cross-browser for basic select box color styling, without having to resort to more "fancy" select box replacements.

Upvotes: 0

Related Questions