How to add an image to a drop-down menu button

Question

How to add an image to a drop-down menu button

my output code is: -

<!DOCTYPE html>
<html>
<style>

#one
{
margin-left:150px;
}

</style>
<body>
<select id="one">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

</body>
</html>

this code is the jail output in the drop down list but now I think add the image to the drop down list as below. enter image description here

I want to change the appearance of the default drop-down arrow so that it works in all browsers.

+4

javascript jquery html css

user3488098 May 09 '14 at 13:22

source share

2 answers

Piyush marvaniya · Answer 1 · 2014-05-09T13:37:54+0000

Try this below css ....

select#one {
    -moz-appearance: none;
    background: url("../images/select_arrow.png");
    text-indent: 0.01px;
    text-overflow: "";
}

Jcharette · Answer 2 · 2014-05-09T13:31:57+0000

Use css property (works only for modern browser):

.dropdown {
    background: url(path/to/image) top right no-repeat;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

For IE:

select::-ms-expand { display: none; }

Follow this little tutorial .

How to add an image to a drop-down menu button

More articles: