Question

我有一个HTML页面，其中有一个<select>下拉框。我希望在某些条件下将盒子的背景更改为红色。

这样可行，但是在Firefox 3.6.16中，当更改背景颜色时，下拉框会丢失其“向下箭头”小部件符号（在其上单击以列出下拉框的选项）。小部件仍然存在 - 可以点击它，下拉框正常扩展 - 但Firefox在渲染背景颜色为红色时，“丢失”实际的“向下箭头”符号。

在下拉框中进行另一次选择后，Firefox重新渲染元素，符号再次弹回，一切正常。

我有这个小样本页来说明问题：

<html>
     <head>
          <title>Showing weird bug with select background colour change</title>
     </head>

     <body>
          <select id="test_select" onchange="select_changed(this);">
               <option value="one" selected="selected">one</option>
               <option value="two">two</option>
               <option value="three">three</option>
               <option value="four">four</option>
          </select>

          <script>
               //   
               //   change <select> to red background unless its value is 'one'
               //
               last_val = 'one';

               function select_changed(element) {
                    var current_val = element.value;

                    if (current_val != last_val) {
                         element.style.backgroundColor = current_val == 'one' ? '' : '#FF8888';
                         last_val = current_val;
                    }
               }
          </script>

     </body>
</html>

选项'one'应该是默认的背景颜色;任何其他选项都是红色。

从一个转换到另一个会导致javascript将<select>元素的背景颜色设置为#FF8888或''。

如果下拉框看起来正常且选择了“一个”并且您选择“两个”，您将看到 - 在Firefox中 - 该元素将变为红色但符号thingie将消失。下次选择一个选项时，它会再次返回。另一种方式 - 从红色到正常背景颜色选择“一个”选项 - 没有相同的问题。

这是我必须忍受的东西，还是有更好的方法来改变背景颜色？谢谢！

Answer 1

我不确定我是否理解你会做什么，但你可以尝试：

<select id="test_select" onchange="select_changed(this);">
   <option value="one" selected="selected" style="background-color:#FFFFFF;">one</option>
   <option value="two" style="background-color:#FF8888;">two</option>
   <option value="three" style="background-color:#FF8888;">three</option>
   <option value="four" style="background-color:#FF8888;">four</option>
</select>

<script>
   //   
   //   change <select> to red background unless its value is 'one'
   //
   last_val = 'one';

   function select_changed(element) {
        var current_val = element.value;

        if (current_val != last_val) {
            element.style.backgroundColor = current_val == 'one' ? '#FFFFFF' : '#FF8888';
            last_val = current_val;
        }
   }
</script>

我只是想建议你，你应该覆盖父元素的子元素，否则它将从父元素继承。

如果您不清楚请告诉我。

Firefox - 改变背景颜色的选择元素的奇怪渲染？

1 个答案: