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

Answer 1

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.

Answer 2

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

1. Wrap the ul in another tag,
2. Hide the overflow of the new parent element, and then,
3. 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>