如何在IE和Opera中修改SELECT標籤的默認高亮行爲？

這裏是我的HTML：如何在IE和Opera中修改SELECT標籤的默認高亮行爲？

<select style="background-color:#e0f0f1"> 
    <option selected="selected">Select</option> 
    <option class="" value="one">One</option> 
    <option class="" value="two">Two</option> 
</select>

See this code in action

在IE和Opera，當你選擇一個選項，它的亮點是藍色的背景顏色。 Firefox，Chrome和Safari不會這樣做。選擇該選項時是否有辦法或技巧移除藍色突出顯示，以便始終顯示原始背景顏色？

如果這是不可能的，是否有一種方法可以添加一個jQuery行爲，在選擇該選項後立即模擬頁面上其他地方的點擊？所以基本上，當你點擊選擇的選項時，高亮消失。

來源

2012-11-01 user1448031

我想我找到了解決方案。也許不是一個很乾淨的解決方案，但這個技巧很有效

我已經在Firefox，Chrome，Safari，Opera和IE 9中對它進行了測試。適用於所有這些版本，但不適用於較舊版本的IE（6和7）。沒有在IE8中測試過。如果有人可以在Mac上測試它，並讓我知道這是否有效，那會很棒。

我添加了一個寬度和高度爲0的輸入字段，並在單擊某個選項時將焦點移至該字段。使用display：none和visibility：隱藏在輸入字段不起作用。所以你將隱藏在角落某處的輸入字段或使用z-index將它移到容器後面也可能工作（但還沒有嘗試過）。如果有人有更好的解決方案，請告訴我。

HTML：

`<select style="background-color:#e0f0f1"> 
    <option selected="selected">Select</option> 
    <option class="" value="one">One</option> 
    <option class="" value="two">Two</option> 
    </select> 
    <input type="text" id="abc" style="width:0; height:0;" />`

的jQuery：

$(document).ready(function(){ 
    $('select option').on('click', function() { $('#abc').focus(); }); 
});

See this in Fiddle

來源

2012-11-01 03:55:09 user1448031

輸入元素是不必要的。只需模糊$（'select'）。 – pbibergal

我在IE8/WinXP和OSX Mountain Lion Safari 6.1.3中測試了@ user1448031的解決方案，並且它在IE8中無法使用，但在Safari上工作。此外，它可以在IE9,10,11中使用。 – Webreality

這不能完成，因爲它是默認的瀏覽器行爲。您最好的選擇可能是替換具有類似功能的選擇框，例如jQuery Chosen插件。

來源

2012-11-01 02:38:52 doublesharp

不幸的是，似乎不工作。這在Opera中沒有效果。在FF和IE中，下拉菜單甚至沒有打開。 – user1448031

我很害怕這個......只是將事件改爲'點擊'，並在Opera中測試，似乎工作。我有一臺Mac，所以沒有IE。 – doublesharp

事實上，如果沒有激活功能，它會在Mac/Opera中變爲白色，直到失去焦點，然後再次獲得背景色。 – doublesharp

在IE11（約以前的版本不知道），你可以從一個集中選擇元素與

取出藍色背景

select::-ms-value {background: none;}

Here's a dabblet demo

來源

2014-04-05 02:17:16 willrice

這個解決方案對我來說非常合適。該解決方案還有助於我們將注意力集中在select元素上，並且我們可以使用鍵盤更改選項。我遇到的這個解決方案的一個問題是，一旦我們選擇了一個選項，選項的顏色變成了白色，這使得它無法閱讀。我們可以通過稍微改變來解決這個問題。 'select :: - ms-value {background：none;顏色：＃42413D;}' –

是否適用於IE10 - 但不適用於IE9 – Benjamin

如何在IE和Opera中修改SELECT標籤的默認高亮行爲？

回答

相關問題