CSS3 Scroll on div with X hidden Y scrolll

CSS3 Scroll on div with X hidden Y scrolll

by Andrew Pougher

HTML

<div id="namefilter">
    <span>DROP DOWN</span>
   <div>
       <label>NAME IS REALLY REALLY REALLY LONG</label> <input type="checkbox"/>
       <label>NAME IS REALLY REALLY REALLY LONG</label> <input type="checkbox"/>
              <label>NAME IS REALLY REALLY REALLY LONG</label> <input type="checkbox"/>
       <label>NAME IS REALLY REALLY REALLY LONG</label> <input type="checkbox"/>
              <label>NAME IS REALLY REALLY REALLY LONG</label> <input type="checkbox"/>
       <label>NAME IS REALLY REALLY REALLY LONG</label> <input type="checkbox"/>
              <label>NAME IS REALLY REALLY REALLY LONG</label> <input type="checkbox"/>
       <label>NAME IS REALLY REALLY REALLY LONG</label> <input type="checkbox"/>
              <label>NAME IS REALLY REALLY REALLY LONG</label> <input type="checkbox"/>
       <label>NAME IS REALLY REALLY REALLY LONG</label> <input type="checkbox"/>
              <label>NAME IS REALLY REALLY REALLY LONG</label> <input type="checkbox"/>
       <label>NAME IS REALLY REALLY REALLY LONG</label> <input type="checkbox"/>
              <label>NAME IS REALLY REALLY REALLY LONG</label> <input type="checkbox"/>
       <label>NAME IS REALLY REALLY REALLY LONG</label> <input type="checkbox"/>
              <label>NAME IS REALLY REALLY REALLY LONG</label> <input type="checkbox"/>
       <label>NAME IS REALLY REALLY REALLY LONG</label> <input type="checkbox"/>       <label>NAME IS REALLY REALLY REALLY LONG</label> <input type="checkbox"/>
       <label>NAME IS REALLY REALLY REALLY LONG</label> <input type="checkbox"/>
              <label>NAME IS REALLY REALLY REALLY LONG</label> <input type="checkbox"/>
              <label>NAME IS REALLY REALLY REALLY LONG</label> <input type="checkbox"/>
       <label>NAME IS REALLY REALLY REALLY LONG</label> <input type="checkbox"/>
              <label>NAME IS REALLY REALLY REALLY LONG</label> <input type="checkbox"/>
       <label>NAME IS REALLY REALLY REALLY LONG</label> <input type="checkbox"/>      ...

CSS

body{padding:25px;}

#namefilter div{ 
    width: 200px; 
  max-height:270px;
  overflow-x: hidden;
  overflow-y: auto; 
display:none}


#namefilter { 
  width: 200px; 
  max-height:300px;
 
  border: 1px solid #eee;
       -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.3);
    -moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.3);
    box-shadow:0 1px 3px rgba(0, 0, 0, 0.3);
}
div label{ 
    padding-right:20px;
    white-space: nowrap;
    float:left;
    width: 162px;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left:20px;
    font-size:12px
}

input{display:block;padding:2px;margin:2px;text-indent:30px}

#namefilter span{background-image: url(http://www.focusdashboard.com/img/sel-arrow.gif), 
  -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
  background-position: 96% 50%;
  background-repeat: no-repeat;
display: block;
width:192px;
padding:4px}

#namefilter:hover > div {display: block;}