Hide vertical scrollbar in <select> element
HtmlCssHtml Problem Overview
Hello I have select box with multiple choices and I need to hide the vertical scrollbar, is it possible?
<select name="sCat" multiple="true">
<!-- My Option Here -->
</select>
Okey, but how then I can achieve an effect where I can select item from list that has ID and then use jQuery to manage this id.click functions? What element I should use then?
Html Solutions
Solution 1 - Html
I know this thread is somewhat old, but there are a lot of really hacky answers on here, so I'd like to provide something that is a lot simpler and a lot cleaner:
select {
overflow-y: auto;
}
As you can see in this fiddle, this solution provides you with flexibility if you don't know the exact number of select options you are going to have. It hides the scrollbar in the case that you don't need it without hiding possible extra option elements in the other case. Don't do all this hacky overlapping div
stuff. It just makes for unreadable markup.
Solution 2 - Html
This is where we appreciate all 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>
Fiddle
Solution 3 - Html
No, you can't control the look of a select box in such detail.
A select box is usually displayed as a dropdown list, but there is nothing that says that it always has to be displayed that way. How it is displayed depends on the system, and on some mobile phones for example you don't get a dropdown at all, but a selector that covers most or all of the screen.
If you want to control how your form elements look in such detail, you have to make your own form controls out of regular HTML elements (or find someone else who has already done that).
Solution 4 - Html
For future reference if somebody else runs into this problem. I found a solution that should work in all modern browsers:
select{
scrollbar-width: none; /*For Firefox*/;
-ms-overflow-style: none; /*For Internet Explorer 10+*/;
}
select:-webkit-scrollbar { /*For WebKit Browsers*/
width: 0;
height: 0;
}
Basically this way the scrollbar is set to a width of 0 and is hence not displayed.
Solution 5 - Html
You can use a <div>
to cover the scrollbar if you really want it to disappear.
Although it won't work on IE6, modern browsers do let you put a <div>
on top of it.
Solution 6 - Html
Chrome (and maybe other webkit browsers) only:
/* 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>
Solution 7 - Html
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>
Solution 8 - Html
Like Guffa said, you cannot reliably get that much control over native controls. The best way is probably to make a box of elements with radio buttons beside each item, then use labels and JavaScript to make the 'rows' interactive, so clicking on a radio button or label will color the selected row.
Solution 9 - Html
Change padding-bottom , i.e may be the simplest possible way .
Solution 10 - Html
I worked out Arraxas solution to:
-
expand the box to include all elements
-
change background & color on hover
-
get and alert value on click
-
do not keep highlighting 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>
Solution 11 - Html
I think you can't. The SELECT element is rendered at a point beyond the reach of CSS and HTML. Is it grayed out?
But you can try to add a "size" atribute.