Add an image into a select list

Asked Jul 24 '17 at 16:09

Active Jul 24 '17 at 16:14

Viewed 23 times

I need to add an image into a select list:

<div class="popupbox">
    <div class="inside-out">
        <img src="images/cancel.png">

        <h5>Language<h5>
        <select>
            <option value="volvo"> English</option>
            <option value="saab"> Arabic</option>
            <option value="mercedes"> Indian</option>
            <option value="audi"> Indonesian</option>
        </select>

        <h5>Country<h5>
        <select>
            <option data-image="images/states.png"> Indonesia</option>
            <option value="saab"> America</option>
            <option value="mercedes"> Saudi Arabia</option>
            <option value="audi"> India</option>
        </select>

        <h5>Currency<h5>
        <select>
            <option value="volvo"> IDR - (RP)</option>
            <option value="saab"> USD - ($)</option>
            <option value="mercedes"> IRR - (IRR)</option>
            <option value="audi"> SAR - (SAR)</option>
        </select>
    </div>
</div>

I tried data-image=".png" and I also tired using background-image: url(.png) but both don't work for me in Chrome or Firefox.

edited Jul 24 '17 at 16:14

Rory McCrossan

331,213
40
305
339

asked Jul 24 '17 at 16:09

Mohamed Khader

1

You cannot add images to `option` elements. To do what you require you'd need to use a library which converts the `select` to another structure which can contain images, `ul`/`li` for example. Check out Select2 – Rory McCrossan Jul 24 '17 at 16:10
1

Do you want to show image besides the option values ? – Himanshu Upadhyay Jul 24 '17 at 16:10
@HimanshuUpadhyay yes exactly – Mohamed Khader Jul 24 '17 at 16:11
@RoryMcCrossan how to do that? – Mohamed Khader Jul 24 '17 at 16:12
https://select2.github.io/ – Rory McCrossan Jul 24 '17 at 16:12
You can check select2 of bootstrap. – Himanshu Upadhyay Jul 24 '17 at 16:12

Add an image into a select list

0 Answers0