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

发布于 2024-10-30 16:44:28 字数 1753 浏览 1 评论 0原文

我有一个 HTML 页面，其中有一个

这是可行的，但在 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 将

如果下拉框看起来很正常，选择了“一”，而您选择了“二”，您会看到 - 在 Firefox 中 - 该元素将变成红色，但符号会消失。下次您选择一个选项时，它会再次出现。另一种方式 - 选择“一个”选项时从红色到正常背景颜色 - 不会有同样的问题。

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

原文

I have a HTML page which has a <select> dropdown box. I want to change the background of the box to be red upon certain conditions.

This works, but with Firefox 3.6.16 the dropdown box loses its 'downarrow' widget symbol (on which one clicks to list the options of the dropdown box) when the background colour is changed. The widget is still there - one can click on it, the dropdown box expands as normal - but Firefox, in rendering the background colour red, 'loses' the actual 'downarrow' symbol.

After making another selection in the dropdown box Firefox re-renders the element and the symbol pops back again, everything looking normal.

I've got this little sample page to illustrate the problem:

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

The option 'one' is supposed to be the default background colour; any other option is red.

Making a transition from one to the other causes the javascript to set the background colour of the <select> element to either #FF8888 or ''.

If the dropdown box is looking normal with 'one' selected and you select 'two' you'll see - in Firefox - that the element will turn red but the symbol thingie will disappear. The next time you select an option it will come back again. Going the other way - from red to normal background colour on select the 'one' option - doesn't have the same problem.

Is this something I just have to live with, or is there a better way to change the background colour? Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

冰火雁神 2024-11-06 16:44:28

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

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

我只是想建议你，你应该覆盖父元素的子元素，如果没有，它将从其父元素继承。

如果您不清楚，请告诉我。

I don't sure I understand correctly what would you do, but can you try:

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

I just want to recommend you that, you should override child elements of parent, if not it will be inherited from its parent.

If you don't clear please let me know.

回复收藏 0 原文

~没有更多了~