css里面li标签怎么加图片_如何使用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 :

foreach ($countries as $countriesList) {

echo '' . $countriesList['name'] . '';

}

?>

CSS:

select.icon-menu option {

background-repeat:no-repeat;

background-position:bottom left;

padding-left:30px;

}

But not getting any results, i am stucked pls help

解决方案

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

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

• option1
• option2>

..

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

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