Hide vertical scrollbar in select element

Question

Hello I have select box with multiple choices and I need to hide the vertical scrollbar  is it possible    lt select name  sCat  multiple  true  gt   lt  -- My Option Here -- gt   lt  select gt    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

User · Answer

Chrome  and maybe other webkit browsers  only    x000D   x000D     you probably want to specify the size if you re going to disable the scrollbar    x000D  select size   -webkit-scrollbar   x000D   display  none  x000D    x000D   lt select size 4 gt  x000D     lt option gt Mango lt  option gt  x000D     lt option gt Peach lt  option gt  x000D     lt option gt Orange lt  option gt  x000D     lt option gt Banana lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

No  you can t control the look of a select box in such detail   A select box is usually displayed as a dropdown list  but there is nothing that says that it always has to be displayed that way  How it is displayed depends on the system  and on some mobile phones for example you don t get a dropdown at all  but a selector that covers most or all of the screen   If you want to control how your form elements look in such detail  you have to make your own form controls out of regular HTML elements  or find someone else who has already done that

User · Answer

This is where we appreciate all the power of CSS3    x000D   x000D   bloc   x000D    display  inline-block  x000D    vertical-align  top  x000D    overflow  hidden  x000D    border  solid grey 1px  x000D    x000D   x000D   bloc select   x000D    padding  10px  x000D    margin  -5px -20px -5px -5px  x000D    x000D   lt div class  bloc  gt  x000D     lt select name  year  size  5  gt  x000D       lt option value  2010  gt 2010 lt  option gt  x000D       lt option value  2011  gt 2011 lt  option gt  x000D       lt option value  2012  SELECTED gt 2012 lt  option gt  x000D       lt option value  2013  gt 2013 lt  option gt  x000D       lt option value  2014  gt 2014 lt  option gt  x000D     lt  select gt  x000D   lt  div gt  x000D   x000D   x000D    Fiddle

User · Answer

I think you can t  The SELECT element is rendered at a point beyond the reach of CSS and HTML  Is it grayed out   But you can try to add a  size  atribute

User · Answer

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

User · Answer

my cross-browser  no-scroll snippet    x000D   x000D   no-scroll  -webkit-scrollbar  display none   x000D   no-scroll  -moz-scrollbar  display none   x000D   no-scroll  -o-scrollbar  display none   x000D   no-scroll  -google-ms-scrollbar  display none   x000D   no-scroll  -khtml-scrollbar  display none   x000D   lt select class  no-scroll  multiple  true  gt  x000D    lt option value  2010   gt 2010 lt  option gt  x000D    lt option value  2011   gt 2011 lt  option gt  x000D    lt option value  2012  SELECTED gt 2012 lt  option gt  x000D    lt option value  2013   gt 2013 lt  option gt  x000D    lt option value  2014   gt 2014 lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

Like Guffa said  you cannot reliably get that much control over native controls   The best way is probably to make a box of elements with radio buttons beside each item  then use labels and JavaScript to make the  rows  interactive  so clicking on a radio button or label will color the selected row

User · Answer

Change padding-bottom   i e may be the simplest possible way

User · Answer

You can use a  lt div gt  to cover the scrollbar if you really want it to disappear  Although it won t work on IE6  modern browsers do let you put a  lt div gt  on top of it

User · Answer

For future reference if somebody else runs into this problem  I found a solution that should work in all modern browsers   select      scrollbar-width  none    For Firefox        -ms-overflow-style  none     For Internet Explorer 10        select -webkit-scrollbar     For WebKit Browsers       width  0      height  0      Basically this way the scrollbar is set to a width of 0 and is hence not displayed

User · Answer

I worked out Arraxas solution to    expand the box to include all elements change background  amp  color on hover get and alert value on click do not keep highlighting selection after clicking    x000D   x000D  let selElem document getElementById  myselect   children 0   x000D  selElem size selElem length  x000D  selElem value -1  x000D   x000D  selElem addEventListener  change   e   gt    x000D    alert e target value   x000D    e target value -1  x000D      x000D   myselect   x000D    display inline-block  overflow hidden  border solid black 1px  x000D    x000D   x000D   myselect  gt  select   x000D    padding 10px  margin -5px -20px -5px -5px    x000D    x000D   x000D   myselect  gt  select  gt  option hover   x000D    box-shadow  0 0 10px 100px  4A8CF7 inset  color  white  x000D    x000D   lt div id  myselect  gt  x000D     lt select gt  x000D       lt option value  2010  gt 2010 lt  option gt  x000D       lt option value  2011  gt 2011 lt  option gt  x000D       lt option value  2012  gt 2012 lt  option gt  x000D       lt option value  2013  gt 2013 lt  option gt  x000D       lt option value  2014  gt 2014 lt  option gt  x000D       lt option value  2015  gt 2015 lt  option gt  x000D       lt option value  2016  gt 2016 lt  option gt  x000D      lt  select gt  x000D   lt  div gt  x000D   x000D   x000D

[html] Hide vertical scrollbar in <select> element

Examples related to html

Examples related to css