Css - 使用背景图像和选择填充（IE）选择答案

【问题标题】：Css - Select with a background image and padding of selection (IE)Css - 使用背景图像和选择填充（IE）选择
【发布时间】：2017-06-24 18:15:56
【问题描述】：

在 Internet Explorer 上正确显示选择输入时遇到问题，尽管它在 Firefox、Safari 和 Chrome 上运行良好。

选择文本一直向下到左侧，并且应该有 60 像素的左侧填充，就像在 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 小提琴

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

【问题讨论】：

标签： css internet-explorer cross-browser

【解决方案1】：

@Nita 我没有问题
・野生动物园
・铬
・歌剧
・IE 10

但我在使用 Firefox 时遇到了问题

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

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

顺便说一下，你可以下载 Safari for windows

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

【讨论】：

从我设法找出 Windows 版 Safari 已停产。我相信你在 safari 上没有问题，因为 -webkit-appearance：在 jsfiddle 中设置为：“none”而不是：“menulist”； .因此，如果设置为无，则不显示选择导航。你能看看更新的jsfiddle吗
我用padding-left制作了另一个版本：60px;在#form-selector - jsfiddle.net/nitadesign/02uj91gp/3
@Nita 我在 Safari 5.1.7 下拉显示上试过了，你是怎么发现你的屏幕不显示的？
@Nita 试试 line-height 和 text-indent hack stackoverflow.com/questions/9615071/…
我是怎么发现的......？昨天我尝试了很多不同的选项，同时与其他人在 Skype 上。我会试试你的建议..