Question

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

Answer 1

@Nita我没有问题 ·Safari浏览器
·铬
·歌剧
·IE 10

但我遇到了Firefox的问题

尝试将此添加到您的代码中

#form-selector select {
    padding-left: 60px;
}

顺便提一下，你可以下载Safari的safari

修改
Safari的解决方案可以在这里看到 Padding doesn't work on select tags in Safari

Css - 选择背景图像和填充选择（IE）

1 个答案: