Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hide vertical scrollbar in <select> element

Tags:

html

css

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?

like image 470
Stan Avatar asked Dec 25 '10 18:12

Stan


People also ask

How do I hide vertical scrollbar but still scrollable?

How to Hide the Vertical Scrollbar in CSS. To hide the vertical scrollbar and prevent vertical scrolling, use overflow-y: hidden like so: HTML.

How can I hide scrollbar in iframe but still scroll?

1. Set the overflow of the parent div as hidden. 2. Set the overflow of the child div to auto and the width 200% (or anything more than 100%, or more than the width of the parent - so that the scrollbar gets hidden).


2 Answers

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.

like image 102
Mike Young Avatar answered Oct 01 '22 07:10

Mike Young


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

like image 20
Arraxas Avatar answered Oct 01 '22 07:10

Arraxas