how to change the triangle icon in drop down list to a customized icon in html

drop-down-menu, html, javascript, jquery

Solution

You can do by this way,

Check this demo jsFiddle

CSS

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-indent: 1px;
    text-overflow: '';
    background: url("YOUR IMAGE") no-repeat right center;
}

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

HTML

<div class="dropdown">
     <p>Show: </p>

     <select>
          <option> Balloon</option>
          <option> Mango</option>
          <option> Banana</option>
     </select>
</div>

Problem

I am trying to create a few drop down lists,but I need to have a customized icon ,not the vintage black triangle .I tried a few tricks from net ,but does not serve my propose. I believe it is possible using JavaScript or j query, but I have no idea. How to do that ??

Original source

Related problems