Geek Answers Handbook

Change <option> color in Firefox

I am trying to change the text color of the selected option. It works 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>
+5
source share
3 answers

This may not be the solution you are looking for, but you can do it 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 turn green selectgreen and the selected item ( option) green (and the rest black). You can do this using the following css code:

select {
  color: green;
}

option[selected] {
  color: green;
}

option {
  color: black;
}

See my JSFiddle . However, the colors will not change after selecting another option.

+6
source

:

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

Internet Explorer Opera. , Firefox WebKit . jQuery selectColorize - , "" .

0

, , , "1", ?

" 1", , , , , .

, HTML :

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

CSS:

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

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/

0

More articles:


All Articles