selectのオプションが要素の幅と一致しません

Question

一度選択メニューをクリックすると、オプションが重複して表示されます。

誰もが行動のこのような時につまずくと、どのような可能性の選択の幅にオプションの幅を一致させるのだろうか - 問題はどの私ができる私のプロジェクトで発生するので、私はバイオリンを追加しませんでした」シェアする。だからもっと一般的なアプローチが必要です。あなたの質問は、限られた情報を持っているが、私は問題はあなたがselectためとoptionために異なるフォントサイズを使用していることであると考えているよう

.select { 
    width: 100%; 
    border-radius: 5px; 
    border: 1px solid #dcdcdc; 
    font-size: 12px; 
} 

Answer 1

は、私はここで少し推測しています。あなたが異なるフォントサイズを使用していることをスクリーンショットから確かに見ることができます。あなたはそれが同じ問題を生じ見ることができるように

.select { 
 
    border-radius: 5px; 
 
    border: 1px solid #dcdcdc; 
 
    font-size: 12px; 
 
} 
 

 
.select option { 
 
    font-size: 16px; 
 
}

<select class="select"> 
 
    <option selected>i like burger and fries</option> 
 
    <option>i like burger and fries</option> 
 
    <option>i like burger and fries</option> 
 
</select>

：

は、このコードを考えてみましょう。異なるフォントサイズを使用していないことを確認するには、コードとCSSを確認する必要があります。フォントサイズが同じであれば、オプションはうまく整列するはずです。

上記のコードの解決策は、CSSから.select optionの定義を削除することです。

フォントサイズだけでなく、サイズの不一致を引き起こす可能性のある他のプロパティもあることに注意してください。たとえば、フォントスタイル、スペース、パディングなどです。基本的に、オプションのスタイルを変更しないようにする必要があります。選択肢から継承させるだけです。

Answer 2

Solution :

select { 
 
    width: 100%; 
 
    border-radius: 5px; 
 
    border: 1px solid #dcdcdc; 
 
    font-size: 12px; 
 
}

<select> 
 
    <option tabindex='-1'>I like Burger and fries</option> 
 
    <option>I like Burger and fries</option> 
 
    <option>I like Burger and fries</option> 
 
    <option>I like Burger and fries</option> 
 
    <option>I like Burger and fries</option> 
 
    <option>I like Burger and fries</option> 
 
</select>