刪除IE10選擇元素箭頭

因此，使用Mozilla和WebKit，我有一個半體面的解決方案，使用appearance: none;替代select框中的箭頭並具有父元素。刪除IE10選擇元素箭頭

在大多數情況下，我禁用了這個功能。對於IE10我實際上不能禁用它，因爲我的條件註釋實際上不工作。

這裏是我的標記：

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]--> 
<!--[if IE 7 ]> <html class="ie7"> <![endif]--> 
<!--[if IE 8 ]> <html class="ie8"> <![endif]--> 
<!--[if IE 9 ]> <html class="ie9"> <![endif]--> 
<!--[if (gt IE 9)]> <html class="ie10plus"> <![endif]--> 
<!--[if !(IE)]><!--> <html> <!--<![endif]-->

類ie10plus並不能使它的方式來標記。

我也覺得有可能是一種合法的方式來取代IE中的箭頭。我並不反對真正解決問題。然而，appearance: none;不起作用。那麼我能在這裏做什麼？

來源

2013-03-12 Parris

什麼？你想設置外觀：沒有爲ie10，就像你正在爲壁虎和Firefox的樣式？ ie10應該在樣式表中設置它的樣式。您可以使用條件來定位其他對象，併爲真正的瀏覽器提供主樣式表 – albert 2013-03-12 03:18:38

@albert外觀：沒有任何作品。它不會刪除選擇框的箭頭。 – Parris 2013-03-12 03:57:32

啊。 MB。所以你的問題是什麼？如何檢測和一個類爲ie10？ – albert 2013-03-12 04:03:54

270

避免瀏覽器嗅探和條件註釋（它們在Internet Explorer 10中不受支持），而是採用更標準的方法。有了這個特殊的問題，您應該瞄準::-ms-expand僞元素：

select::-ms-expand { 
    display: none; 
}

來源

2013-04-10 18:38:46 Sampson

@Parris謝謝。我希望您比其他常用方法更適合實施此解決方案。 – Sampson 2013-04-11 01:42:39

@JonathanSampson我實際上是在尋找像這樣的改變。 – Parris 2013-04-11 01:56:18

這真棒謝謝：不幸的是，它不工作在IE9雖然:( – Pawcu 2013-10-01 12:31:25

Internet Explorer 10 doesn't support conditional comments，所以你必須做別的。一種解決方案是嗅出用JavaScript的用戶代理，並添加類自己：

<script> 
if (navigator.userAgent.indexOf("MSIE 10.0") !== -1) { 
    document.documentElement.className += " ie10"; 
} 
</script>

你或許應該在<head>所以加這一點，你沒有的無樣式內容的閃光燈，但可能不會是一個問題。

另外，如果你使用jQuery，你可能想要做這樣的事情：

if (navigator.userAgent.indexOf("MSIE 10.0") !== -1) { 
    $("html").addClass("ie10"); 
}

如果你想檢查IE10以上，複製粘貼功能getInternetExplorerVersion和from this Microsoft page然後更改if到這樣的事情：

if (getInternetExplorerVersion() >= 10) { 
    // whatever implementation you choose 
}

來源

2013-03-12 02:05:00

-1

仍然不知道你想什麼來完成，但這會檢測並添加一類IE10：


來源

2013-03-12 04:15:32 albert

不知道爲什麼這得到了downvoted ...我認爲約翰納森桑普森的答案更優雅，應該選擇。但下來投票？ weak.sauce。 – albert 2013-04-11 02:10:21

這是downvoted，因爲它是一個黑客試圖迫使IE10識別條件註釋。被接受的答案的「標準方法」是使用這些供應商僞元素：http://msdn.microsoft.com/en-us/library/windows/apps/hh767361.aspx – Benxamin 2013-06-13 17:39:40

1.您的技術在IE標準模式按照Evan的回答中的鏈接（在IE11中刪除了HTML條件，在IE11中刪除了JS條件 - 因爲它們是非標準的）。 2.供應商前綴是處理瀏覽器特定功能的標準方式。 – robocat 2014-10-13 02:37:38

我有一個問題與IE 10和11的隱藏下拉箭頭的網站上，我的工作，它使用Zurb基金會。有在_form.scss一行其中有

select::-ms-expand { 
    display: none; 
}

我刪除它和下拉箭頭開始正常顯示在所有broswers。謝謝喬納森在這裏給你答案。這幫助我搜索了很多解決方案。

來源

2014-05-14 16:33:34 ranjeesh

請使用評論這種事情，而不是一個額外的答案。 – 2014-05-14 16:59:31

Zurb基金會的意外的行爲帶我到這裏，感謝您的答案，或評論！） – 2014-08-25 20:03:48

這是怎麼樣的不同被接受的答案？ – 2017-03-16 09:52:32

但是！如果我們想要增加寬度，我們不能也這樣做：

display:none

所以

select::-ms-expand { 
/* IE 8 */ 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
/* IE 5-7 */ 
filter: alpha(opacity=0); 
/* Good browsers :) */ 
opacity:0; 
}

來源

2014-05-21 07:52:36 Sergey

刪除IE10選擇元素箭頭

回答

相關問題