我在选择输入时遇到问题,要在Internet Explorer上正确显示,但它在Firefox,Safari和Chrome上运行良好。
选择选项一直向下到左边,应该有60px的左边填充,如chrome,safari和firefox。
请在我准备的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
答案 0 :(得分:0)
要解决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中正常工作。
希望这有帮助! :)
答案 1 :(得分:0)
我在IE上使用了以下hack :(我正在使用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版本的旧版本上检查它,我会很高兴。请告诉我。