<select>垂直スクロールバーを削除する方法

Question

HTMLから垂直スクロールバーを削除する方法について、高低を検索しています。添付されたjsFiddleでは、サイズ値が省略されている場合は、スクロールバーはありません。サイズ= 6またはサイズ= 7の場合は、垂直スクロールバーがあります。

私はいくつかの提案された解決策を見つけましたが、どれもうまくいかないようです。

解決方法はありますか？

.hideoverflow { 
 
    overflow: hidden; 
 
}

<div class="hideoverflow"> 
 
    <select size="7"> 
 
    <option id="A">A</option> 
 
    <option id="B">B</option> 
 
    <option id="C">C.....</option> 
 
    <option id="D">D</option> 
 
    <option id="E">E</option> 
 
    <option id="F">F</option> 
 
    </select> 
 
</div>

Answer 1

あなたはまだ直接<はCSSで>要素を選択するスタイルすることはできません。これは若干日付が付けられたMDN articleに記載されている既知の問題です。

ただし、ディスプレイハックを使用して同様の効果を達成できます。同様の質問に対してArraxas' answerを参照してください。私は彼らの答えを取って、あなたのコードを反映するように変更しました。

.hideoverflow { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    overflow: hidden; 
 
    border: solid #DCDFE3 1px 
 
} 
 
.hideoverflow select { 
 
    padding: 4px; 
 
    margin: -5px -20px -5px -5px; 
 
}

<div class="hideoverflow"> 
 
    <select size="7"> 
 
    <option id="A">A</option> 
 
    <option id="B">B</option> 
 
    <option id="C">C.....</option> 
 
    <option id="D">D</option> 
 
    <option id="E">E</option> 
 
    <option id="F">F</option> 
 
    </select> 
 
</div>