How to display an image in the options of select box in CHROME?

Question

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

How to display an image in the option tag?

Answer 1

This is not possible because webkit browsers do not support styling of <option> tags.

The most widely used cross browser solution is to use <ul> / <li> .

You can also refer this .

Answer 2

This is not possible with HTML and CSS only, at least not in Chrome.

But you could try some Javascript magic, eg this

Edit: It is possible in Firefox with CSS' property background-image , but it doesn't seem to work in chrome.

Answer 3

You can use this code.It is working. Please put your images on div.

HTML Code:

 <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 Code:

    #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 Code:

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

Live Demo