與造型<select/>元素IE問題

考慮下面的HTML標記：在FF與造型<select/>元素IE問題

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

    <head> 
     <title>search/master</title> 
     <style type="text/css"> 
      select{ 
       background-color: pink; 
      } 
      option{ 
       background-color: white; 
      } 
     </style> 
    </head> 

    <body> 
     <p> 
      <select> 
       <option>one........</option> 
       <option>two........</option> 
      </select> 
     </p> 
    </body> 
</html>

輸出如下：（類似的輸出來在Chrome，Safari和Opera以及）

output on FF & other browsers

但IE上的輸出如下：

output on IE

什麼是可靠和簡單的解決方法，使IE上的輸出看起來類似於其他瀏覽器？

來源

2011-10-31 siva636

如果您確實想要這樣做，您可以使用1px x 1px背景圖像，並將選項設置爲:transparent

select{ 
    background: url(http://ajthomas.co.uk/stackoverflow-help/back.png); 
} 
option{ 
    background: transparent; 
}

見jsfiddle example我爲你做

來源

2011-10-31 10:59:39 Alex

謝謝！它只是工作！ – siva636

_defiantly_這個詞非常合適。 – szupie

如果您同時爲背景顏色（用於選擇和選項）粉紅色，它在每個瀏覽器中看起來完全相同。更好的解決方案也許..不要在選項元素上指定背景顏色....

來源

2011-10-31 10:50:39

「如果你把兩個背景顏色（select和option）粉紅色，它看起來在每個瀏覽器完全一樣」不，它的劑量，'選擇'將在IE中是白色的！ – siva636

呃..我使用ie9，看起來很正常。也許你正在使用舊版本？ –

當然你很好，我很抱歉。但我的要求是保持'選擇'和'選項'不同的顏色。 – siva636

首先刪除以下的CSS值，它給選項的白色背景顏色，從而隱藏在IE中選擇的粉紅色的背景顏色。
```
option { 
    background-color: white; 
} 
```

其次總是包圍的形式和字段集標籤內的表單元素如下所示： -

<form> 
<fieldset> 
    <select> 
     <option>One</option> 
    </select> 
</fieldset> 
</form>

三表和字段集有一個默認的邊框和填充值，以便在CSS，你可以添加此代碼以刪除這些默認值：
```
form, fieldset { 
    border: 0px; 
    margin: 0px; 
    padding: 0px; 
} 
```

因此，在短期的IE不正確顯示選擇框的主要原因是select元素沒有被包含在FORM和OPTION的白色背景顏色值中。

希望這會有所幫助。

來源

2011-10-31 11:03:09 Raj

當我們爲select元素和select元素本身中的選項指定一些背景色時，就會出現問題。

解決方法：僅當select元素處於焦點狀態時纔將樣式（背景顏色）應用於選項元素。（這是唯一的選擇元素的聚焦狀態時，我們實際上看到它裏面的選項元素）

select{ 
    background-color: #f1f1f1; 
    ...    
    } 

    select:focus > *{ 
    background-color:#fff; 
    }

來源

2015-08-24 09:32:01

與造型<select/>元素IE問題

回答

相關問題