CODEWITHSUNDEEP
iphoneioscssselect
matt
matt

Reputation: 44303

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

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!

Upvotes: 8

Views: 57385

Answers (3)

user339884
user339884

Reputation: 31

Try this 100% worked for me

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

Upvotes: 2

domdambrogia
domdambrogia

Reputation: 2243

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.

Upvotes: 0

Chris
Chris

Reputation: 26888

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.

Upvotes: 13

Related Questions