2

I have a select input and i have disabled the default browser appearences as follows

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearence: none;
}

I want to use a custom arrow, in order to expand and collapse to select menu. I have tried various js tricks but nothing really works just right.

I have considered using pure css making the select input transparent with z-index 2. Consequently the trigger would fall into place and appear as a button.

Here is the jfiddle, but i can't make it work.

Rentonie
  • 477
  • 1
  • 10
  • 25

1 Answers1

3

You could try to set an background on your select box. ID Styling don't seem to work on select boxes, so you rather aim for select directly (if you have mulitple select boxes wrap them).

    select {
      padding: 2px 2px 2px 2px;
      border: none; 
      background-image: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png");
      background-position: right center; /*Positioning*/
      background-repeat: no-repeat; /*Prevent showing multiple background images*/
    }

Something like this might work, i orientated on this fiddle which i was brought by this question. Hope this helps.

Jannik Lehmann
  • 468
  • 5
  • 25
  • Your solution can work, but if i have a selection with long text it looks really messy. Text on top of image and so on. Is there a way to avoid that? – Rentonie Oct 28 '16 at 18:14
  • This could be solved by positioning the background to the right center, i updated the code example above. – Jannik Lehmann Oct 28 '16 at 18:23
  • +1'd, but I don't know that I agree that "ID Styling don't seem to work on select boxes" -- I'm able to do so in Chrome w/o any issues. – Alexander Nied Mar 20 '17 at 15:42