Listbox scrollbar won't hide

Question

I'm trying to hide the scrollbar on a list box unless it's necessary but can't get it to behave. It seems to always want to show. I am using Chromium, I haven't checked in other browsers whether it behaves.

HTML

<select size="2">
    <option>item</option>
    <option>item</option>
    <option>item</option>
    <option>item</option>
    <option>item</option>
</select>

CSS

select {
    width: 200px;
    min-height: 400px;
    overflow: auto;
}

http://jsfiddle.net/jmRmv/

The above code produces:

enter image description here

Is this what you looking for : http://jsfiddle.net/jmRmv/4/ I mean you don't want to show the other options ? — Sulthan Allaudeen, Apr 01 '14 at 11:22
@SulthanAllaudeen I want to hide the scrollbar on the right of the box. — Lerp, Apr 01 '14 at 11:24
http://stackoverflow.com/questions/4531269/hide-vertical-scrollbar-in-select-element — Deepak Ingole, Apr 01 '14 at 12:31

score 0 · Answer 1 · answered Apr 01 '14 at 15:36

You can do it with a bit of CSS trickery and some JavaScript. It might not be the perfect solution but it works.

JSFiddle demo.

CSS

.wrapper {
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    border: solid black 1px;
}
.select {
    width: 200px;
    min-height: 50px;
    margin: 0 -20px 0 0;
}
.select.scrolling {
    margin: 0;
}

HTML

<div class="wrapper">
    <select id="select" class="select" size="2">
        <option>item 1</option>
        <option>item 2</option>
        <option>item 3</option>
        <option>item 4</option>
        <option>item 5</option>
        <option>item 6</option>
    </select>
</div>

JavaScript

var select = document.getElementById('select');

if (select.clientHeight < select.scrollHeight) {
    select.classList.add('scrolling'); // classList: IE9 and higher
}

Listbox scrollbar won't hide

1 Answers1