セレクトボックスオプションのボーダーボトムがクロムで機能しない

Question

selectボックスの無効なオプションを希望します。

CODE

#myselect option { 
 
    font-size: 13px; 
 
    color: #1A1F24; 
 
} 
 
#myselect option:disabled { 
 
    font-size: 11px; 
 
    color: #ABB6C0; 
 
    border-bottom: 1px solid #ABB6C0; 
 
}

<select id="myselect"> 
 
    <option value="1">One</option> 
 
    <option value="2" disabled>Two</option> 
 
    <option value="3">Three</option> 
 
    <option value="4">Four</option> 
 
</select>

このコードはFirefoxで正常に動作し、私のコードを参照してください。クロムで働かないどのようにクロムでこれを行うには？

JS Fiddle

Answer 1

はElectricToolbox、borderからこのArticleによると、それはあなたがChromeを/ option/optgroupselectでスタイル使用できるプロパティではありません。

• font-style
• font-weight
• color
• background-color
：ここ

あなたは、スタイルできるプロパティです

• font-family
• font-size
• padding

注一の元素の唯一の仕事上、これらの特性のいくつかは、例えば、paddingのみselect

に動作すること

あなたはselectsをカスタマイズする場合のようにあなたは、ここで選択するプラグインアウトのいくつかを試してみたいことがあります：あなたが唯一のoption要素のための境界線を使用することができますように見えます

• Bootstrap Select
• Select2

Answer 2

Firefoxの場合はthisです。

ユニバーサルソリューションを実現するには、カスタムドロップダウンリストコントロールを作成する必要があります。いくつかの例についてはCustom Drop-Down List Stylingをご覧ください。