<option> 的图像在 firefox 中有效，但在其他浏览器中无效答案

【问题标题】：Image for <option> works in firefox but not works in other browsers<option> 的图像在 firefox 中有效，但在其他浏览器中无效
【发布时间】：2012-06-19 10:35:01
【问题描述】：

html:

<select size="10" style="width: 325px; background-color: #fff;" class="postCode">
    <option value="36621746_0S_F">6 Upperkirkgate Aberdeen</option>
    <option value="31560744_0S_F">12A Upperkirkgate Aberdeen</option>
    <option value="31560745_0S_F">12B Upperkirkgate Aberdeen</option>
    <option value="36621735_0S_F">36 Upperkirkgate Aberdeen</option>
    <option value="35390362_0S_F">48-58 Upperkirkgate Aberdeen</option>
</select>

CSS：

.postCode {
    background-color: rgba(0, 0, 0, 0);
}
.postCode option
{
    background-color: rgba(0, 0, 0, 0);
    background-image: url('../img/house.png');
    background-repeat: no-repeat;
    background-position: left top;
    text-indent: 2em;
}

在 Firefox 中

在 Chrome 中

请帮帮我。

更新： - IE8 与 Chrome 中的结果相同

【问题讨论】：

欢迎在webkit.org/b/83932上发表评论/抄送自己

标签： javascript html css cross-browser

【解决方案1】：

某些浏览器使用本机控件实现下拉菜单，并且不允许对选项进行样式设置。除了将元素替换为其他元素的集合和一堆 JavaScript 之外，您对此无能为力。

【讨论】：

【解决方案2】：

不妨试试

-webkit-appearance:none;

和

-webkit-box-sizing: contents-box;

关于这个话题here有更多讨论

【讨论】：

这将从选择中删除向下箭头

【解决方案3】：

我用列表来做

JS：

(function ($) {
    $.fn.postcodeAddressList = function() {

        this.each(function() {
            var el = $(this),
            li = el.find('li'),
            i = li.length;

            strippedList(el);

            while(i--) {
                $(li[i]).on("click", function(e){ 
                    strippedList(el);
                    $(e.currentTarget).attr("selected", "selected");
                    el.attr("data",$(e.currentTarget).attr("data"));
                });
            } 
        });

        return this;
    };
})(jQuery);

strippedList =  function ( el) {
    var li = el.find('li'),
        i = li.length; 

     while(i--) {
         if($( li[i] ).attr("selected")!= 'defined') {
             $(li[i]).removeAttr("selected");
         }
         if (i%2) {
             $(li[i]).attr("stripped","stripped");
         }else {
             $(li[i]).removeAttr("stripped");
         }
     }

}

CSS：

.postCode li[stripped="stripped"] {
    background-color: #f5f5f5;
}
.postCode li[selected="selected"] {
    background-color: #ccc;
}
.postCode li
{
    background-image: url('../img/house.png');
    background-repeat: no-repeat;
    background-position: 5% 50%;
    padding: 7px 0 7px 4em;
    cursor: pointer;
    font-weight: bold;
    color: #333;
}
.postCode[disabled="disabled"] {
    background-color: #f5f5f5;
    border-color: #ddd;
    cursor: not-allowed;
}
.postCode {
    background-color: white;
    list-style: none outside none;
    margin-left: -10px;
    padding: 5px 0;
    width: 340px;
    height: 300px;
    overflow-y: auto;
    border: solid 1px #CCC;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

HTML：

<ul class="postCode" data="29392449_0S_F">
    <li data="26850525_898354S_F">Andrew Begg 24-26 Upperkirkgate Aberdeen</li>
    <li data="31763873_0S_F" stripped="stripped">Flat 1 12 Upperkirkgate Aberdeen</li>
    <li data="31763875_0S_F">Flat 1 14 Upperkirkgate Aberdeen</li>
    ...
</ul>

用途：

...
$('.postCode').postcodeAddressList();
...


...
var value = $('.postCode').attr("data");
...

结果：

Mozilla

铬

IE8

【讨论】：