수직 스크롤바 숨기기

수직 스크롤바 숨기기요소 안녕하세요 여러 선택 항목이있는 선택 상자가 있고 세로 스크롤 막대를 숨겨야합니다. 가능합니까? <select name = "sCat"multiple = "true"> <!-My Option Here-> </ select> 좋아요. 그러면 ID가있는 목록에서 항목을 선택한 다음 사용할 수있는 효과를 얻을 수있는 방법은 무엇입니까? 이 id.click 기능을 관리하는 jQuery? 그러면 어떤 요소를 사용해야합니까? 여기에서 CSS3의 모든 기능을 높이 평가할 수 있습니다. .bloc {display : inline-block; 수직 정렬 : 상단; 오버플로 : 숨김; 테두리 : 단색 회색 1px; } .bloc select {padding : 10px; 여백 : -5px -20px -5px -5px; } <div class = "bloc"> <select name = "year"size = "5"> <option value = "2010"> 2010 </ option> <option value = "2011"> 2011 </ option> <option value = "2012"SELECTED> 2012 </ option> <option value = "2013"> 2013 </ option> <option value = "2014"> 2014 </ option> </ select> </ div> Fiddle I 이 스레드가 다소 오래되었다는 것을 알고 있지만 여기에 정말 해키스러운 답변이 많이 있으므로 훨씬 더 간단하고 깔끔한 것을 제공하고 싶습니다. select {overflow-y : auto; }이 바이올린에서 볼 수 있듯이이 솔루션은 선택할 옵션의 정확한 수를 모를 경우 유연성을 제공합니다. 다른 경우에 가능한 추가 옵션 요소를 숨기지 않고 필요하지 않은 경우 스크롤바를 숨 깁니다. 이 모든 겹치는 div 작업을 수행하지 마십시오. 읽을 수없는 마크 업을 만듭니다. 아니요, 할 수 있습니다. t 선택 상자의 모양을 세부적으로 제어합니다. 선택 상자는 일반적으로 드롭 다운 목록으로 표시되지만 항상 그런 방식으로 표시되어야한다는 내용은 없습니다. 표시 방법은 시스템에 따라 다르며, 예를 들어 일부 휴대폰에서는 드롭 다운이 전혀 표시되지 않지만 화면의 대부분 또는 전체를 덮는 선택기가 표시됩니다. 양식 요소가 이러한 세부 사항에서 어떻게 보이는지 제어하려면 일반 HTML 요소에서 자신의 양식 컨트롤을 만들어야합니다 (또는 이미이를 수행 한 다른 사람을 찾아야합니다). 정말로 사라지기를 원한다면 <div>를 사용하여 스크롤바를 덮을 수 있습니다. IE6에서는 작동하지 않지만 최신 브라우저에서는 그 위에 <div>를 넣을 수 있습니다. Chrome (및 기타 웹킷 브라우저) 만 해당 : / * 다음과 같은 경우 크기를 지정하고 싶을 것입니다. 스크롤바를 비활성화합니다 * / select [size] ::-webkit-scrollbar {display : none; } <select size = 4> <option> Mango </ option> <option> Peach </ option> <option> Orange </ option> <option> Banana </ option> </ select> my cross-browser .no- 스크롤 스 니펫 : .no-scroll ::-webkit-scrollbar {display : none;} .no-scroll ::-moz-scrollbar {display : none;} .no-scroll ::-o-scrollbar {display : none; } .no-scroll ::-google-ms-scrollbar {display : none;} .no-scroll ::-khtml-scrollbar {display : none;} <select class = "no-scroll"multiple = "true"> <option value = "2010"> 2010 </ option> <option value = "2011"> 2011 </ option> <option value = "2012"SELECTED> 2012 </ option> <option value = "2013"> 2013 </ option> <option value = "2014"> 2014 </ option> </ select> Guffa가 말했듯이 기본 컨트롤에 대해 그렇게 많은 제어를 안정적으로 얻을 수 없습니다. 가장 좋은 방법은 각 항목 옆에 라디오 버튼이있는 요소 상자를 만든 다음 레이블과 JavaScript를 사용하여 '행'을 대화 형으로 만드는 것이므로 라디오 버튼이나 레이블을 클릭하면 선택한 행에 색상이 지정됩니다. padding-bottom을 변경합니다. 즉 가능한 가장 간단한 방법 일 수 있습니다. 나는 Arraxas 솔루션을 다음과 같이 해결했습니다. 모든 요소를 ​​포함하도록 상자를 확장하여 마우스 오버시 배경 및 색상 변경 및 클릭시 경고 값을 클릭 한 후 선택 항목을 강조 표시하지 않음 let selElem = document.getElementById ( 'myselect'). children [0]; selElem.size = selElem.length; selElem.value = -1; selElem.addEventListener ( 'change', e => {alert (e.target.value); e.target.value = -1; }); #myselect {display : inline-block; 오버플로 : 숨김; 테두리 : 검정색 1px; } #myselect> select {padding : 10px; margin : -5px -20px -5px -5px; ";} #myselect> 선택> option : hover {box-shadow : 0 0 10px 100px # 4A8CF7 inset; color : white;} <div id ="myselect "> <select > <option value = "2010"> 2010 </ option> <option value = "2011"> 2011 </ option> <option value = "2012"> 2012 </ option> <option value = "2013"> 2013 < / option> <option value = "2014"> 2014 </ option> <option value = "2015"> 2015 </ option> <option value = "2016"> ​​2016 </ option> </ select> </ div> 나는 당신이 할 수 있다고 생각합니다 티. SELECT 요소는 CSS 및 HTML의 범위를 벗어난 지점에서 렌더링됩니다. 회색으로 표시됩니까? 그러나 "크기"속성을 추가 할 수 있습니다. 참고 URL : https://stackoverflow.com/questions/4531269/hide-vertical-scrollbar-in-select-element