how to hide moz scrollbar in dropdown menu

Question

.no-scroll::-webkit-scrollbar {display:none;} /* Safari */
.no-scroll::-moz-scrollbars {display:none;}
.no-scroll::-o-scrollbar {display:none;} /* opera */
.no-scroll::-google-ms-scrollbar {display:none;}
.no-scroll::-khtml-scrollbar {display:none;}

I have ul and li tags for drop-down and ul have max-height:400px and after it display horizontal scrollbar. i want scroll effect but not scrollbar.

i have success to do this in chrome but in mozila not works properly

can anybody help me please ...

Something like this: http://stackoverflow.com/questions/4531269/hide-vertical-scrollbar-in-select-element ? — Rasmus Eskesen, Apr 25 '16 at 12:01
I have already try to do in this way but can't get success. Is there any other way to solve this bug ?? — SPG, Apr 25 '16 at 12:09
Is extra markup permitted? Can you provide the HTML for your `ul` and its parent? — Shaggy, Apr 25 '16 at 13:52

Rasmus Eskesen · Answer 1 · 2016-04-25T13:26:37.780

One way to do this could be using a div to cover up the scrollbar. Simply add a div with the same background-color as its container, and place it on top of the scrollbar. I suggest using JavaScript or preferably jQuery to position the div and remember to make the two elements overlapping; this can be done by setting both of their positions to absolute for instance (and their container's position to relative).
Here's a quick example:
https://jsfiddle.net/jffe4sy3/1/
It's not pretty or very generic, but it works in most cases.

HTML:

<select id="select_id" class="select" size="5">
    <option value="1" >test1</option>
    <option value="2" >test2</option>
    <option value="3" SELECTED>test3</option>
    <option value="4" >test4</option>
    <option value="5" >test5</option>
</select>
<div id="div_id" class="cover"></div>

CSS:

.select{
  height:60px; //set this to your max-height (i.e.  max-height:400px;)
  position:absolute;
}
 .cover {
 background-color:white;
 position:absolute;
 border-left:solid grey 1px;
 width:16px;
}

JavaScript/jQuery:

$("#div_id").height($("#select_id").height()+2); // the height of the select + 2px to include the border
$("#div_id").css("margin-left", $("#select_id").width()-15); // the width of the select minus the scrollbar

However I suggest you always use the display:none option when applicable! You should only use this solution in the rare case where it isn't.

score 1 · Answer 2 · answered Apr 25 '16 at 14:00

If extra markup is not an issue for you, you could:

Wrap the ul in another tag,
Hide the overflow of the new parent element, and then,
Set the width of the ul to be 100% of the parent plus the width of the scrollbar.

*{box-sizing:border-box;margin:0;padding:0;}
div{
  border:1px solid #000;
  margin:20px auto;
  overflow:hidden;
  height:250px;
  width:90%;
}
ul{
  max-height:100%;
  list-style:none;
  overflow:auto;
  width:calc(100% + 20px)
}
li{
  height:50px;
}
li:nth-child(odd){background:#000;}
li:nth-child(even){background:#999;}

<div>
  <ul>
    <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
  </ul>
</div>

This is actually a better solution than mine. – Rasmus Eskesen Apr 25 '16 at 14:23 — Rasmus Eskesen, Apr 25 '16 at 14:23

how to hide moz scrollbar in dropdown menu

2 Answers2