Firefox - 改變背景顏色選擇元素的奇怪渲染？

我有一個HTML頁面，其中有一個<select>下拉框。我想在特定條件下將框的背景更改爲紅色。Firefox - 改變背景顏色選擇元素的奇怪渲染？

這是有效的，但在Firefox 3.6.16下，當背景顏色發生變化時，下拉框會丟失它的'downarrow'小部件符號（單擊它可以列出下拉框的選項）。小部件仍然存在 - 人們可以點擊它，下拉框像往常一樣展開 - 但是，在渲染背景顏色爲紅色的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>

「一」應該是默認的背景顏色的選項;任何其他選項都是紅色的。

從一個轉換到另一個會導致javascript將<select>元素的背景顏色設置爲#FF8888或''。

如果下拉框看起來正常，選擇'one'並選擇'2'，您將在Firefox中看到 - 元素將變爲紅色，但符號thingie將消失。下次您選擇一個選項時，它會再次返回。以另一種方式 - 從紅色到正常的背景顏色選擇「一個」選項 - 沒有相同的問題。

這是我只需要忍受的事情，還是有更好的方法來改變背景顏色？謝謝！

來源

2011-04-06 Brad

我不知道我理解正確的話你會做什麼，但你可以嘗試：

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

我只是想建議你，你應該覆蓋父的子元素，如果不是會繼承其父。

如果你不清楚，請讓我知道。

來源

2011-04-06 10:04:20 vietean

設置單個選項的背景顏色可以使它們在下拉框中單擊時具有該顏色，並且所有元素都是「展開」的，但不會使下拉框本身在正常的「未展開」模式下顯示爲紅色。 – Brad 2011-04-06 11:02:32

Firefox - 改變背景顏色選擇元素的奇怪渲染？

回答

相關問題