下拉在IE8和IE9不工作

HTML：下拉在IE8和IE9不工作

<div class="select-input"> 
    <select> 
      <option value="1">Option 1</option> 
      <option value="2">Option 2</option>   
    </select> 
</div>

CSS：

.select-input{ 
    width:180px; 
    padding:5px; 
    font-family: "Helvetica-Light"; 
    font-size: 9pt; 
    color:#2a2a2a; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    -o-appearance: none; 
    background: #ffffff url(".../images/select-arrow.png") no-repeat; 
    background-position:143px center; 
    overflow:hidden; 

} 
.select-input{ 
border-style:solid; 
    border-width:thin; 
    border-color: #DDDDDD; 
    margin-top:5px; 
}

看到我在fiddle

演示中，我定製的下拉框中的箭頭，這是工作在Chrome，FF，Opera中很好，但在ie9和ie8中沒有工作。在ie9和ie8中，我得到了像小提琴那樣的輸出，所以如何自定義Chrome瀏覽器中的FF &。

screenshot

最後更新：working demo

來源

2013-10-15 user2725407

爲什麼你有'網址（「... /圖像/選擇-arrow.png」）不重複三個點;'？ – Atle

那麼，哪裏是重現實際問題的工作代碼？ –

箭頭圖像投擲404，很難檢查沒有圖像 – grimmus

-1

它看起來像外觀屬性在Internet Explorer的是不支持這就是問題所在。

有用於在IE下拉箭頭僞元件。嘗試添加此CSS（爲您的頁面定製）。

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

來源

2013-10-15 15:33:24 cardern

您可以從這裏看到演示網站54.227.255.162/user：username：testing＆password：testing123查看所需的箭頭。 – user2725407

請參閱我上次更新的工作演示。 – user2725407

嘗試添加該你的CSS，使之適用於Internet Explorer工作：'溢出：隱藏;' – cardern

好了，爲了那些風格在IE中，您可能需要獲得實際<select>比你有<div>寬。可能是你正在尋找的東西是這樣的：http://jsfiddle.net/qhCsJ/2187/

來源

2013-10-15 17:58:56

下拉在IE8和IE9不工作

回答

相關問題