title: Styling the first option of a <select> input on iOS
body: <p>I'm trying to style a <code>select</code> input on iOS. The first option or initial state should have smaller font-size but not the rest of the options.</p>
  
  <p>I have the following html structure:</p>
  
  <pre><code>&lt;select class="dropdown"&gt;
      &lt;option selected="" value="Navigation"&gt;Navigation&lt;/option&gt;
      &lt;option value="some-link"&gt;Whatever&lt;/option&gt;
      &lt;option value="some-link"&gt;Another option&lt;/option&gt;
      &lt;option value="some-link"&gt;Why&lt;/option&gt;
      &lt;option value="some-link"&gt;What&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>My CSS for it looks like this:</p>
  
  <pre><code>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;
      }
  }
  </code></pre>
  
  <p>The <code>&lt;select&gt;</code> menu looks exactly like I want it to look. It says "Navigation" inside a light-gray box with a rather small font-size.</p>
  
  <p>However when clicking/tapping the <code>select</code> on my iphone the native UI view of iOS shows all options also in a very small font-size. </p>
  
  <p>How can I just make the <code>selected</code> option (or the box itself) use the custom formatting but not the options. I want my options to have a "normal" readable font-size.</p>
  
  <p>Any ideas on that? I tried with <code>option:not(:first-of-type)</code> and increase the font-size but no effect!</p>