如何在移动设备和 Safari 上 css select 选项的背景图片

Question

我正在尝试通过 CSS 设置 select 选项的样式。它在 Chrome 上运行良好，但我在 Safari 浏览器和移动设备上遇到问题。出于某种原因，我的选项背景图片没有显示。

option[value=icon_1] { 
   background-image: url("images/icon/Icon_1.png");
}

在chrome上会显示如下：

但在手机和 safari 上显示如下：

Answer 1

不幸的是，Safari 可能无法实现这一点。因此，我建议不要使用 select 标签，因为这个标签在 safari 中有很多限制，所以使用 div 来确保 safari 中的样式正确。然后使用jquery得到select值。

$( ".optionwrapper" ).click(function() {
  var val = $( this ).text();
  alert(val);
});

.selectwrapper{
  width: 300px;
  border:1px solid black;
    border-radius: 2px;
}
.optionwrapper{
    cursor: pointer;
    font-size:0px;
}

.optionwrapper:before{
  content:'';
      width: 30px;
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    display:block;
        background-image: url("http://couplelab.webdesign88.com/wp-content/themes/dt-the7-child/images/icon/Icon_1.png");
    
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="selectwrapper">

<div class="optionwrapper icon_1">icon_1</div>
<div class="optionwrapper icon_2">icon_2</div>
<div class="optionwrapper icon_3">icon_3</div>
</div>

如何在移动设备和 Safari 上 css select 选项的背景图片

How to css Backgroud image for option in select on Mobile and Safari

html

css

safari

mobile