3

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

Sham
  • 414
  • 2
  • 6
  • 14

3 Answers3

3

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>
Jaykumar Patel
  • 26,836
  • 12
  • 74
  • 76
mehulmpt
  • 15,861
  • 12
  • 48
  • 88
  • will it work in IE and firefox ,just asking I have one similar which dint worked properly – Sham Apr 01 '14 at 07:07
  • -webkit- will make it work in safari and chrome, -moz- will make it work in firefox, appearance is just for future browsers to render it without prefixes, as I've declared ::-ms-expand, it will work on IE 8+, if you want to work it on before versions, change :: to : – mehulmpt Apr 01 '14 at 07:10
  • I will accept this as answer am using IE 10 ,the thing is like when am viewing it in chrome and firefox ,its ok ,but in IE ,I can not see the image ,the values take over the full space,how to remove that – Sham Apr 01 '14 at 07:31
  • That's weired. Please note that IE9 less won't work with this trick as there was no real CSS method to do so. But surely, you can "hack" to remove dropdown from IE9 lesser browsers http://stackoverflow.com/questions/19407332/how-to-hide-drop-down-arrow-in-ie9 – mehulmpt Apr 01 '14 at 12:02
0

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

UmarKashmiri
  • 872
  • 8
  • 15
  • thanks i checked the fiddle ,but i need a customized image at the end ,this fiddle does not have that – Sham Apr 01 '14 at 07:33
  • Hey you have to set the image position only. Look now i have updated http://jsfiddle.net/umarkashmiri/etFuL/1/ – UmarKashmiri Apr 01 '14 at 07:45
  • I had not appropriate image... but when you set your own just set its background-postion property – UmarKashmiri Apr 01 '14 at 07:47
  • i have marked another answer ,which was also helpful,but that answer came earlier than also ,but never less than a heartfelt thanks – Sham Apr 02 '14 at 05:37
0

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

Sham
  • 414
  • 2
  • 6
  • 14