Question

<select>    
   <option>image1 text</option>
   <option>image2 text</option>
   <option>image3 text</option>
   <option>image4 text</option>
 </select>

如何在选项标签中显示图像？

Answer 1

这是不可能的，因为webkit浏览器不支持<option>标签的样式。

使用最广泛的跨浏览器解决方案是使用<ul> / <li>。

您也可以参考this。

Answer 2

这不仅适用于HTML和CSS，至少不适用于Chrome。

但你可以尝试一些Javascript魔法，例如this

编辑：在Firefox中可以使用CSS＆＃39;属性background-image，但它似乎不适用于chrome。

Answer 3

您可以使用此代码。它正在运行。请把你的图像放在div。

HTML代码：

 <select id="selected">
 <option value="0">Select</option>
 <option value="a">Images text1</option>
 <option value="b">Images text2</option>
 <option value="c">Images text3</option>
 <option value="d">Images text4</option>
 </select>

<div id="colors">
   <div id="a">
    <img src="http://www.acura.com/images/HomepageSlideshow/home_bg_mdx.jpg" height="200px" width="400px"/>
    </div>
    <div id="b">
    <img src="http://www.acura.com/images/HomepageSlideshow/home_bg_tlx.jpg" height="200px" width="400px" />
    </div>
    <div id="c">
    <img src="http://www.acura.com/images/HomepageSlideshow/home_bg_rlx.jpg" height="200px" width="400px"/>
    </div>
    <div id="d">
    <img src="http://www.acura.com/images/HomepageSlideshow/home_bg_ilx.jpg" height="200px" width="400px"/>
    </div>
</div>

CSS代码：

    #a
    {
        background-color: red;
        height: 200px;
        width: 400px;
    }
    #b
    {
        background-color: green;
        height: 200px;
        width: 400px;
    }
   #c
    {
        background-color: blue;
        height: 200px;
        width: 400px;
    }
   #d
    {
        background-color: darkviolet;
        height: 200px;
        width: 400px;
    }
     #colors div
    {
        display: none;
    }

JQuery代码：

$(document).ready(function(){
        $("#selected").change(function(){
            $('#colors div').hide();
            $('#'+$(this).val()).show();
        });
    });

Live Demo

如何在CHROME中的选择框选项中显示图像？

3 个答案: