Styling the first <select> input option on iOS

Question

I am trying to create select input in iOS. The first option or initial state should have a smaller font size, but not the rest of the options.

I have the following html structure:

 <select class="dropdown"> <option selected="" value="Navigation">Navigation</option> <option value="some-link">Whatever</option> <option value="some-link">Another option</option> <option value="some-link">Why</option> <option value="some-link">What</option> </select> 

My CSS for this looks like this:

 select { -webkit-appearance: none; font-family: 'Custom-Font', sans-serif; font-size:.5em line-height:1.8em; // optical center background-color: #ccc; color: #333; border: none; padding: 6px 10px 4px 10px; } .dropdown { background-image: url(img/assets.svg); background-position: right 2px; background-repeat: no-repeat; width: 100%; display:block; margin-bottom:-1.5em; option:not(:first-of-type) { font-size:1.5em; } } 

The <select> menu looks as if I want it to look. He says “Navigation” inside a light gray square with a small font size.

However, when I press / press select on my iphone, the native iOS user interface displays all the parameters in a very small font size too.

How can I just make the selected parameter (or the window itself) use custom formatting, but not the parameters. I want my options to have a “regular” readable font size.

Any ideas on this? I tried with option:not(:first-of-type) and increased the font size, but without effect!

Answer 1

Unfortunately, there is no way to do this. iOS Safari takes full control over the select style of the inner contents of lists. Here's a link to check: a small link .

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

This is not very preferable, but if you absolutely need to change the default style, then I am afraid that this is the only way to go; here is a demo that should give you an idea of ​​how to make a simulation: another small link .

Answer 2

What is it for? I had a transparent <select> drop-down menu with a border radius when closing. On iOS (I'm not sure about android, I haven't tested it) a gray default square for <select> appeared inside my user border, which was unattractive and undesirable.

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

 -webkit-appearance: none; 

And further - related to this topic OP. Bootstrap offers a convenient solution with excellent documentation that allows you to customize dropdown lists using Javascript. Check here.

Answer 3

Try this 100% for me

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