Styling the first option of a <select> input on iOS
css, ios, iphone, select
Solution
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.
Problem
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 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 it 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 exactly like I want it to look. It says "Navigation" inside a light-gray box with a rather small font-size. However when clicking/tapping the `select` on my iphone the native UI view of iOS shows all options also in a very small font-size. How can I just make the `selected` option (or the box itself) use the custom formatting but not the options. I want my options to have a "normal" readable font-size. Any ideas on that? I tried with `option:not(:first-of-type)` and increase the font-size but no effect!