Firefox - weird rendering for select element on changing background colour?_问答_开发者

Firefox - weird rendering for select element on changing background colour?

开发者 https://www.devze.com 2023-02-22 23:16 出处：网络

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.

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 colo开发者_StackOverflowur 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!

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.