Css - 在IE上选择选项(带背景图像)padding-left或text-indent问题

时间:2017-02-13 00:29:16

标签: css forms internet-explorer cross-browser

我在选择输入时遇到问题,要在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

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

2 个答案:

答案 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版本的旧版本上检查它,我会很高兴。请告诉我。