iOSの<select>入力の最初のオプションのスタイル設定

Question

iOS上でselect入力のスタイルを設定しようとしています。最初のオプションまたは初期状態は、フォントサイズは小さくても、残りのオプションは使用しないでください。

私は、次のHTML構造を持っている：それはこのようになりますため

<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> 

マイCSS：

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; 
    } 
} 

<select>メニューは、私はそれを見てみたい正確にように見えます。それは、フォントサイズがかなり小さい明るい灰色のボックスの中に「ナビゲーション」と表示されます。

私のiPhoneのselectをクリック/タップすると、iOSのネイティブUIビューにすべてのオプションが非常に小さなフォントサイズで表示されます。

selectedオプション（またはボックス自体）にカスタムフォーマットを使用しますが、オプションは使用しないでください。私は私のオプションが "普通の"読み取り可能なフォントサイズを持つようにしたい。

これに関するアイデアはありますか？ option:not(:first-of-type)で試してみましたが、フォントサイズは増やしても効果はありません！

Answer 1

残念ながら、それを行う方法はありません。 iOS Safariはスタイリングを完全に制御しますselectは内部コンテンツをリストします。確認の参考資料はlittle linkです。

これを実現する1つの方法は、JavaScriptを使用してドロップダウン/選択メニューをシミュレートすることです。

それはあまりお勧めしませんが、の場合は絶対ににデフォルトのスタイルを変更する必要がある場合は、それが唯一の方法だと思います。ここでは、シミュレーションを行う方法についてのアイデアを提供するデモがあります：another little link。

Answer 2

これは価値があるのですが、閉じたときにボーダー半径の透明な<select>ドロップダウンがありました。 iOS（私はアンドロイドについてはわかりません、私はそれをテストしませんでした）<select>のためのデフォルトのグレーボックスは、魅力的ではなく、望ましくない私のカスタムボーダーの内側に表示されます。

は、私は以下のCSSを使用し、内側灰色のボックスを取り除くには：

-webkit-appearance: none; 

がさらに - このOPのトピックに関連します。 Bootstrapは、Javascriptでカスタムドロップダウンを有効にするための素晴らしいドキュメントを備えた便利なソリューションを提供します。 Check it out here.

Answer 3

この100％は私

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

のために働いてみ