<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을 참조하십시오. 나는 그들의 대답을 가져 와서 코드를 반영하도록 변경했습니다. 7 개 이상의 옵션이있을 때

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