Hide the vertical scroll bar in the <select> element

Question

Hi, I have a select box with several options and I need to hide the vertical scrollbar, is this possible?

<select name="sCat" multiple="true"> <!-- My Option Here --> </select> 

Okey, but how then can I achieve an effect when I can select an item from a list with an identifier, and then use jQuery to control these id.click functions? Which item should I use?

Answer 1

This is where we appreciate the power of CSS3:

 .bloc { display: inline-block; vertical-align: top; overflow: hidden; border: solid grey 1px; } .bloc select { padding: 10px; margin: -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> 

violin

Answer 2

I know this thread is somewhat old, but there are a lot of really raucous answers here, so I would like to provide something much simpler and much cleaner:

 select { overflow-y: auto; } 

As you can see in this script , this solution gives you flexibility if you do not know the exact number of choices that you have. It hides the scroll bar in the event that you do not need it, without hiding in this case additional elements of options. Do not do this hacking overlay div . It just does for unreadable markup.

Answer 3

No, you cannot control the appearance of the selection window in such detail.

The select box is usually displayed as a drop-down list, but there is nothing to suggest that it should always be displayed that way. How it is displayed depends on the system, and on some mobile phones, for example, you do not get a drop-down list at all, but a selector that covers most or all of the screen.

If you want to control how your form elements look so detailed, you must make your own form controls from regular HTML elements (or find someone else who has already done this).

Answer 4

You can use a <div> to cover the scroll bar if you really want it to disappear.
Although it will not work on IE6, modern browsers will let you put a <div> on top of it.

Answer 5

Chrome only (and possibly other web browsers):

 /* you probably want to specify the size if you're going to disable the scrollbar */ select[size]::-webkit-scrollbar { display: none; } 

 <select size=4> <option>Mango</option> <option>Peach</option> <option>Orange</option> <option>Banana</option> </select> 

Answer 6

my cross browser .no-scroll snippet:

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

Answer 7

As Guff said, you cannot reliably gain such control over your own controls. The best way, probably, is to make the box of items with radio buttons next to each item, then use labels and JavaScript to make the rows interactive, so clicking on a radio button or shortcut will color the selected line.

Answer 8

Change the bottom of the gasket, i.e. may be the easiest way.

Answer 9

I developed an Arraxas solution for:

• expand the window to include all elements

• change color and color on hover

• get and warn value when pressed

• do not select the selection after clicking

 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; overflow:hidden; border:solid black 1px; } #myselect > select { padding:10px; margin:-5px -20px -5px -5px;"; } #myselect > select > 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> 

Answer 10

I think you can’t. The SELECT element appears at a point inaccessible to CSS and HTML. Is it gray?

But you can try adding the size attribute.