的CSS - 選擇選項（背景圖片）填充左或TEXT-INDENT問題上IE

我有選擇輸入一個問題來正確顯示在Internet Explorer，但它運作良好，在Firefox，Safari和Chrome。的CSS - 選擇選項（背景圖片）填充左或TEXT-INDENT問題上IE

選擇選項去一路下跌到左邊，應該有左填充爲在Chrome，Safari和Firefox 60像素。

請我準備的jsfiddle測試。你能幫忙嗎？

HTML

<div id="form-selector">  
<select name='someinput' id='someinput' class="form-control img-input"> 
<option value="" selected="selected">1</option> 
<option value="">2</option> 
</select> 
</div>

CSS：

#form-selector select { 
    overflow: -moz-hidden-unscrollable; 
    width: 100%; 
    height: 35px; 
    background:#fff; 
    margin-bottom:14px; 
    font-size: 14px; 
    color:#000000; 
    -webkit-appearance: menulist; 
} 

// Firefox Fix 
@-moz-document url-prefix() { 
#form-selector select { 
    text-indent: 30px; 
} } 


.img-input { 
background:url(http://placehold.it/60x30) no-repeat left center #ffffff !important; 
    padding-left:60px; }

JS FIDDLE

https://jsfiddle.net/nitadesign/02uj91gp/15/

來源

2017-02-13 Nita

我用下面的IE瀏覽器黑客：（我使用IE 11）

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { 
    #form-selector select { 
    padding-left: 60px; 
} 
}

更新的jsfiddle：

https://jsfiddle.net/nitadesign/02uj91gp/16/

我想如果並欣賞有人可以檢查它在Safari ，Edge 12和IE 11以上的版本。請讓我知道。

來源

2017-02-13 01:39:15 Nita

爲了解決在IE造成text-indent的錯誤，你可以使用padding-left，其中工程在所有瀏覽器:)

#form-selector select { 
    overflow: -moz-hidden-unscrollable; 
    width: 100%; 
    height: 35px; 
    padding-left: 60px; 
    background:#fff; 
    margin-bottom:14px; 
    font-size: 14px; 
    color:#000000; 
    -webkit-appearance: menulist; 
}

請注意，您還需要刪除您添加特定的Firefox修復，因爲這不再是必要的：

// Firefox Fix 
@-moz-document url-prefix() { 
#form-selector select { 
    text-indent: 30px; 
} }

我創建了一個新的小提琴展示這個正常工作在所有瀏覽器here。

希望這會有所幫助！ :)

來源

2017-02-13 00:52:00

所以它應該但不是。請檢查Firefox！ – Nita

這是因爲您添加了額外的Firefox特定縮進，因此不再需要這種縮進。只要刪除它，它將在Firefox中工作 - https://jsfiddle.net/wfrgyLg7/1/。我剛剛更新了我的答案，以覆蓋此（並顯示新的鏈接）:) –

這是我的出發點之前，我問這個問題。現在任何人都可以在Safari上檢查它。當時我沒有Mac訪問權限，並且使用這些css設置，我遇到了Safari的問題。一旦我修復Safari，IE出現問題。 – Nita

回答

相關問題