Question

我试图更改所选选项的文字颜色。它在IE中工作，但在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>

已更新

<!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>

更新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>

Answer 1

这可能不是您正在寻找的解决方案，但您可以在css中执行此操作：

option[selected] {
    color: green;
}

这仅适用于支持属性选择器的浏览器（IE7 +）

编辑：阅读完评论后，我明白了你想要达到的目标。您希望将select绿色和所选元素（option）设为绿色（其余为黑色）。您可以使用以下css代码执行此操作：

select {
  color: green;
}

option[selected] {
  color: green;
}

option {
  color: black;
}

查看我的JSFiddle。但是，选择其他选项后颜色不会改变。

Answer 2

看看这里：

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

默认情况下，在Internet Explorer和Opera中选择元素显示选择选项的颜色和背景颜色，而Firefox和WebKit 浏览器没有。 jQuery selectColorize规范化了这种行为跨浏览器，用于基本选择框颜色样式，无需诉诸更多“花哨”的选择框替换。

Answer 3

那么，你想要在选择“选项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/

在firefox </option>中更改<option>的颜色

3 个答案: