So entfernen Sie <select> vertikale Bildlaufleiste

Question

Ich habe High und Low für eine Möglichkeit gesucht, die vertikale Bildlaufleiste aus einem HTML zu entfernen. In der angehängten jsFiddle, wenn der Größenwert weggelassen wird, gibt es keine Bildlaufleiste. Bei Größe = 6 oder Größe = 7 gibt es eine vertikale Bildlaufleiste.

Ich habe mehrere vorgeschlagene Lösungen gefunden und keiner von ihnen scheint zu funktionieren.

Hat jemand eine Lösung?

.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

Sie können immer noch nicht direkt die < > Element in CSS Stil auswählen. Es ist ein bekanntes Problem, das in diesem leicht datierten MDN article beschrieben wird.

Sie können jedoch einen Display-Hack verwenden, um einen ähnlichen Effekt zu erzielen. Eine ähnliche Frage finden Sie unter Arraxas' answer. Ich habe ihre Antwort genommen und sie so geändert, dass sie Ihren Code widerspiegelt.

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