69

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?

2
  • Not that I'm aware. You'll need to make a "Control" yourself (i.e. simulate the effect using a div and a button with a click event or something [not to mention keyboard shortcuts]). Commented Dec 25, 2010 at 18:57
  • "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?" A option tag doesn't have an ID either. I think you mean an attribute in which you store the ID. If so, you can use any tag that supports an attribute to put the value in: radio, checkbox, button. In theory even textbox.
    – Bazzz
    Commented Dec 27, 2010 at 8:18

11 Answers 11

95

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.

9
  • 2
    No problem, always should answer with answers when you have them. It's what SO is all about man.
    – Stan
    Commented Aug 31, 2015 at 19:56
  • 4
    Why this answer has not been selected as the best answer ?
    – Ahsan
    Commented Sep 18, 2015 at 11:38
  • 2
    @JuanLanus well I guess I had a misunderstanding of what auto means. Apparently, auto just leaves it up to the browser to decide what to do with the scrollbar, and Firefox handles it differently than everyone else, which is super lame. See the section on Syntax in this link: developer.mozilla.org/en-US/docs/Web/CSS/overflow
    – Mike Young
    Commented Dec 2, 2015 at 21:40
  • 1
    This is a nice but Mozilla really needs to get with the program. Commented Jan 13, 2016 at 23:34
  • 2
    This works just as well as the most popular answer and is much cleaner.
    – adg
    Commented Apr 26, 2017 at 7:48
74

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

6
  • 1
    Better to use clip than margin.
    – BrianFreud
    Commented Jul 28, 2012 at 14:10
  • 1
    Nice, but a little improvment would be to use a span instead of a div, just in case browser doesn't support inline-block (yeah, I must be talking about a microsoft's ungifted baby).
    – Serge
    Commented Sep 17, 2013 at 12:21
  • 39
    This is where we appreciate all the power of CSS3. Could someone tell me where the CSS3 is here?
    – lbstr
    Commented Mar 28, 2014 at 18:30
  • 11
    It's not really css3, you could do the same in CSS2 or (with tweaks) even 1. In fact, it's more of a hack than a real styling of select, which is still not stylable.
    – Randolpho
    Commented Jun 13, 2014 at 16:03
  • 1
    So what happens in the case that you have more than 5 elements? They just get hidden?
    – Mike Young
    Commented Aug 31, 2015 at 18:16
22

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

2
  • 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?
    – Stan
    Commented Dec 25, 2010 at 19:11
  • Why the downvote? If you don't explain what it is that you think is wrong, it can't improve the answer.
    – Guffa
    Commented Apr 23, 2015 at 15:55
8

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;
}

Basically this way the scrollbar is set to a width of 0 and is hence not displayed.

2
  • Thanks - I used the the answer above by @Mike Young years ago and it worked. Then it stopped working. scrollbar-width: none; works in Firefox v101 atm. Commented Jul 8, 2022 at 22:46
  • @Butthosenewbuttonsthough, the example above was missing the second colon in the pseudo element selector (just edited)... I wonder if that was the cause for it not working for you? Regardless it's working okay as of this comment's date in Chrome & Safari (& FF). Also, your username is confusing here :)
    – Synexis
    Commented Oct 8, 2023 at 6:18
5

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>

3

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.

2

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>

2
  • 2014 doesn't show up as an option. You have to drag downwards to see it, which you'd only do by accident, or middle mouse scroll, which you wouldn't do because it's clearly not scrollable.
    – 1j01
    Commented Nov 19, 2015 at 23:04
  • @1j01 add size="5" to the select tag to see all options
    – SirArt
    Commented Aug 9, 2017 at 9:13
0

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.

0

Change padding-bottom , i.e may be the simplest possible way .

0

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>

-1

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.

2
  • 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?
    – Stan
    Commented Dec 25, 2010 at 19:10
  • adding the "size" attribute still shows the vertical ghost scrollbar Commented Sep 5, 2011 at 5:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.