Styling the first option of a <select> input on iOS

Question

I\'m trying to style a select input on iOS. The first option or initial state should have smaller font-size but not the rest of the options.

I have the

Answer 1

Try this 100% worked for me

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

Answer 2

For what it's worth - I had a transparent <select> dropdown with a border radius when closed. On iOS (I'm not sure about android, I didn't test it) the default grey box for the <select> would appear inside of my custom border which was unappealing and unwanted.

To get rid of the inner grey box I used the following CSS:

-webkit-appearance: none;

And further more - pertaining to this OP's topic. Bootstrap offers a convenient solution with great documentation to enable custom dropdowns with Javascript. Check it out here.

Answer 3

Unfortunately, there isn't a way to do it. iOS Safari takes full control of styling select lists' internal contents. Here's a reference for verification: little link.

One way to achieve this this would be to simulate the dropdown/select menu using JavaScript.

It's not very preferable, but if you absolutely require to change the default styling, then I'm afraid it's the only way to go; here's a demo that should give you an idea on how to do the simulation: another little link.