Question

详细

我想在我的下拉菜单左侧添加一个小标记
我不确定最佳做法是什么。

这是我尝试过的

<!-- Dropdown-Menu -->
    <div class="col-sm-6 drop-down ">
        Select Country : 
        <select id="state" onchange="window.location=this.value" >
            <option value="">--Select--</option>
            <?php 
            foreach(array_unique($countries) as $country){ ?>
            <option value="#<?php echo $country ; ?> ">
            <img 
            src="/img/flags_3/flags/48/
            <?php echo isset( $distributor['hq_country']['name'] ) ? $distributor['hq_country']['name'] : '' ?>.png" 

            width="16px" height="16px">
            <?php echo $country ; ?>
            </option>
            <?php } ?>  
        </select>
    </div>

她是我现在拥有的link

Answer 1

很抱歉，但无法在<select>

中添加图片

您最好的选择是使用带有<ul>元素的<li>并构建一些功能类似于select但使用其他元素构建的内容

的内容

<ul>
    <li><img src="your image here" />some test here</li> 
    <!-- or use css or a font icon for cleaner mark up -->
</ul>

然后使用javascript绑定一些鼠标事件

Answer 2

由于你的select已经有了一个包含类，你可以这样做：

HTML：

<div>
    <select>
        <option>1</option>
        <option>2</option>
    </select>
</div>

CSS：

select,
option {
    width: 200px;}

div:before {
    content: '';
    display:inline-block;
    width: 18px;
    height: 18px;
    background-image: url('yourImageHere.png');}

http://jsfiddle.net/w1bfvfft/

Answer 3

看看Jquery UI：

http://jqueryui.com/selectmenu/#custom_render

这就是你所需要的：）

如何使用小图像制作下拉菜单？

详细

这是我尝试过的

3 个答案: