Firefox - странный рендеринг для элемента select при изменении цвета фона? - PullRequest
Новая
       5

Firefox - странный рендеринг для элемента select при изменении цвета фона?

2 голосов
/ 06 апреля 2011

У меня есть 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 - что элемент станет красным, но символ "вещь" исчезнет.В следующий раз, когда вы выберете опцию, она вернется снова.Если вы идете другим путем - от красного до нормального цвета фона при выборе опции «один» - у меня нет той же проблемы.

Это то, с чем мне просто нужно жить, или есть лучший способизменить цвет фона?Спасибо!

1 Ответ

0 голосов
/ 06 апреля 2011

Я не уверен, что правильно понимаю, что бы вы сделали, но вы можете попробовать: 

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

Я просто хочу порекомендовать вам, что вы должны переопределить дочерние элементы parent, если нет, то он будет унаследован от его родителя.

Если вы не ясно, пожалуйста, дайте мне знать.

...