CODEWITHSUNDEEP
javascriptjqueryhtmldrop-down-menu
Sham
Sham

Reputation: 414

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

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 ??

Upvotes: 3

Views: 4847

Answers (3)

Sham
Sham

Reputation: 414

I have already accepted another answer ,according to the question the answer was almost to the point.However I dint used the answer,The disadvantages are like u need to have the proper image(Which I dint had) to put(I needed a diamond shape and with in that another triangle screen short attached ) and again it was not working in IE.So ,what exactly I did is ,I draw the whole thing (the diamond and white triangle inside it) in canvas and positioned it perfectly and with pointer-events:none;the canvas was allowed to pass the clicks to the actual drop down list.

This is the screen short of what exactly needed

enter image description here

Upvotes: 0

mehulmpt
mehulmpt

Reputation: 16577

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>

Upvotes: 3

UmarKashmiri
UmarKashmiri

Reputation: 872

You can try this. I have made a sample for you on Fiddler

<div class="dropdown">
      <p>Show: </p>
        <select>
         <option> Balloon</option>
         <option> Mango</option>
         <option> Banana</option>
       </select>
</div> 


.dropdown p {
    display: inline-block;
    font-weight: bold;
}

.dropdown select {

      border: 0 !important; 
      -webkit-appearance: none;
      -moz-appearance: none; 
      background: url('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSePVWt6a83sB0JECOwilcf11eZsK_ciMNH-eUSpNpXJCKWLav7') no-repeat right; 
      background-position: 82px 7px;  
      width: 100px; 
      text-indent: 0.01px; 
      text-overflow: "";  
      color: #1455a2;
}

Hope this will help

Upvotes: 0

Related Questions