CODEWITHSUNDEEP
phphtmlcss
Geetika
Geetika

Reputation: 820

How to put background image in select option tag using css

I have a country dropdown list receiving from json response, and want to add respective country flag icons (getting the images as well from json reponse) next to the country names.

I have tried different jQuery and bootstrap plugins for that but what they are doing is ruining my previous select box styling and are adding their own ones dynamically.

I want to achieve this using CSS only.

Code tried so far :

<select class="form-control icon-menu" name="country" id="country_id" onchange="fetchCountryCode(this.value);">
   <?php
       foreach ($countries as $countriesList) {
         echo '<option value=' . $countriesList['id'] .' style=" background-image : url('. $countriesList['flag_url'] .')" data-imagecss="flag ad">' . $countriesList['name'] . '</option>';
        }
    ?>
</select>

CSS:

<style>
select.icon-menu option {
    background-repeat:no-repeat;
    background-position:bottom left;
    padding-left:30px;
}
</style>

But not getting any results, i am stucked pls help

Upvotes: 0

Views: 5772

Answers (1)

Elheni Mokhles
Elheni Mokhles

Reputation: 4001

You can't give an option tag a background-image.

One solution will be to create your own "select" component.

<ul>
     <li>option1</li>
     <li>option2></li>
     ..
</ul>

then you give some css to look like a select input.

And some javascript to handle showing and hiding "li" elements

Upvotes: 1

Related Questions