【问题标题】:How to add background-image to select-box?如何将背景图像添加到选择框?
【发布时间】:2014-09-09 11:13:26
【问题描述】:

我已经完成了this question 中的回答,但到目前为止我在谷歌浏览器中还没有运气。

以下代码在 Firefox 中运行良好:

select {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  text-indent: 0.01px;
  text-overflow: ""; 
}

option {
    background: transparent        url(http://www.clinicalflow.com/skins/common/icons/ed_ins_img.png)     no-repeat left center;
    padding-left: 20px;  
    width: 200px;
}

有什么提示吗?

Here is the fiddle I have been playing with.

【问题讨论】:

标签: html css


【解决方案1】:

应该是这样的:

option {
    background: transparent url(http://www.clinicalflow.com/skins/common/icons/ed_ins_img.png) no-repeat left center;
    padding-left: 20px;  
    width: 200px;
}

您在 background: transparent; 之后使用了分号,并且在错误的 url 之后使用了分号。

【讨论】:

  • 嘿,你领先我一秒
  • 对不起,这是我在 SO 中粘贴代码时犯的错字。如果您查看小提琴,它就是您编写它的方式。
  • 还有,你在透明后使用;
  • 再次抱歉。那是小提琴中的编辑。将来会检查所有内容,然后再在 SO 中询问。如果您尝试当前的链接版本,那么您最初编写它的方式就是这样。
  • 哦!我检查了您更新的小提琴并尝试在 select 中设置它工作正常但没有选项,我认为不可能,或者需要重新搜索...jsfiddle.net/pm86r8bm/4
【解决方案2】:

我有一个适用于所有浏览器的解决方案jsfiddle.net/8FydL/445

关于background-image.的选项

这是一个已知的解决方案,可以帮助我很多次。 解决方案来自here:

CSS:

.desc { color:#6b6b6b;}
.desc a {color:#0092dd;}

.dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
.dropdown dd { position:relative; }
.dropdown a, .dropdown a:visited { color:#816c5b; text-decoration:none; outline:none;}
.dropdown a:hover { color:#5d4617;}
.dropdown dt a:hover { color:#5d4617; border: 1px solid #d0c9af;}
.dropdown dt a {background:#e4dfcb url('http://www.jankoatwarpspeed.com/wp-content/uploads/examples/reinventing-drop-down/arrow.png') no-repeat scroll right center; display:block; padding-right:20px;
                border:1px solid #d4ca9a; width:150px;}
.dropdown dt a span {cursor:pointer; display:block; padding:5px;}
.dropdown dd ul { background:#e4dfcb none repeat scroll 0 0; border:1px solid #d4ca9a; color:#C5C0B0; display:none;
                  left:0px; padding:5px 0px; position:absolute; top:2px; width:auto; min-width:170px; list-style:none;}
.dropdown span.value { display:none;}
.dropdown dd ul li a { padding:5px; display:block;}
.dropdown dd ul li a:hover { background-color:#d0c9af;}

.dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }
.flagvisibility { display:none;}

JS:

 $(".dropdown img.flag").addClass("flagvisibility");
    $(".dropdown dt a").click(function() {
        $(".dropdown dd ul").toggle();
    });

    $(".dropdown dd ul li a").click(function() {
        var text = $(this).html();
        $(".dropdown dt a span").html(text);
        $(".dropdown dd ul").hide();
        $("#result").html("Selected value is: " + getSelectedValue("sample"));
    });

    function getSelectedValue(id) {
        return $("#" + id).find("dt a span.value").html();
    }

    $(document).bind('click', function(e) {
        var $clicked = $(e.target);
        if (! $clicked.parents().hasClass("dropdown"))
            $(".dropdown dd ul").hide();
    });

    $(".dropdown img.flag").toggleClass("flagvisibility");

和演示 Html:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <dl id="sample" class="dropdown">
        <dt><a href="#"><span>Please select the country</span></a></dt>
        <dd>
            <ul>
                <li><a href="#">Brazil<img class="flag" src="http://www.jankoatwarpspeed.com/wp-content/uploads/examples/reinventing-drop-down/br.png" alt="" /><span class="value">BR</span></a></li>
                <li><a href="#">France<img class="flag" src="http://www.jankoatwarpspeed.com/wp-content/uploads/examples/reinventing-drop-down/fr.png" alt="" /><span class="value">FR</span></a></li>

            </ul>
        </dd>
    </dl>
    <span id="result"></span>

希望,这将拯救你的一天 :) !

【讨论】:

    猜你喜欢
    • 2020-10-07
    • 1970-01-01
    • 2016-02-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-02-11
    • 1970-01-01
    • 2011-03-19
    相关资源
    最近更新 更多