HTML | Show horizontal scroll bar on select list

| By Webner

In one of our projects, we needed to add horizontal scroll bar on select list so that we could see the wider text of some values:


For that, I tried all the possible solutions to add horizontal scroll bar but none of them resolved my problem. I tried adding overflow:scroll ,overflow-x:scroll and other possible css solutions.

Following is sample HTML code to create multi-select list:

<select id="from" size="10" multiple="">
<option value="16c" title="test123">test123</option>
<option value="19c" title="course one">course one</option>
<option value="29c" title="Sample 1">Sample 1</option>
<option value="34c" title="test">test</option>
<option value="59c" title="Course with assignment and face to face activity">Course with assignment and face to face activity</option>
<option value="72c" title="hindi "subject"">hindi "subject"</option>
<option value="73c" title="maths "practical"">maths "practical"</option>
<option value="123c" title=" Inserting Todayäó»s Date"> Inserting Todayäó»s Date</option>
<option value="126c" title="Social Forum Course">Social Forum Course</option>
<option value="170c" title="Platinum 4000">Platinum 4000</option>

Solution: We can’t add a horizontal scroll bar on select list directly so we need to do some extra work around it. Create two divs outside select list. Hide the default vertical scrollbar of a select list by adding some negative margin on the right side (so it comes under the margin and becomes invisible). Add scrollbars to the new divs:

<div class="block1">
<div class="block2">  
<select id="from" style="margin-right:-17px;"></select>

.block1 {
max-width: 300px;
max-height: 300px;
display: block;
border: 1px solid #ccc;

.block2 {
display: inline-block;
vertical-align: top;
overflow: hidden;
border-right: 1px solid #a4a4a4;

#from {
width: auto !important;
border : none !important;

And it would look like following: 


One comment

Leave a Reply

Your email address will not be published. Required fields are marked *