JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<section id="leftPageList">
<div class="scrollable" id="CustomerSelectDiv">
<select size="45" name="lbPages" onchange="javascript:setTimeout(&#39;__doPostBack(\&#39;lbPages\&#39;,\&#39;\&#39;)&#39;, 0)" id="lbPages" class="scrollableinside">
	<option selected="selected" value="1">Index</option>
	<option value="2">Hotel</option>
	<option value="12">Events</option>
	<option value="13">Lounge</option>
	<option value="14">What To See</option>
	<option value="15">Rooms</option>
	<option value="16">Accomodation</option>
	<option value="17">Restaurant</option>
	<option value="18">Menu</option>
	<option value="19">Wine</option>
	<option value="20">Afternoon Tea</option>
	<option value="21">Meet The Chef</option>
	<option value="22">Catering &amp; Delivery</option>
	<option value="23">Spa</option>
	<option value="24">Treatments</option>
	<option value="25">Premier Spa Suite</option>
	<option value="26">Hair Salon</option>
	<option value="27">Gift Cards</option>
	<option value="28">The shop</option>
	<option value="29">Fitness</option>
	<option value="30">Personal Training</option>
	<option value="31">Fitness Classes</option>
	<option value="32">Membership</option>
	<option value="33">Weddings</option>
	<option value="34">Open Days And Wedding Fairs</option>
	<option value="35">For Brides to be </option>
	<option value="36">Corporate &amp; Banqueting</option>
	<option value="37">Banqueting</option>
	<option value="38">Conference </option>
	<option value="40">Team building </option>
	<option value="41">Wellness</option>
	<option value="42">Offers</option>
	<option value="43">Gallery</option>
	<option value="44">Contact us</option>
	<option value="45">Terrace</option>
	<option value="46">Day spa packages</option>
	<option value="47">Packages</option>
	<option value="48">Careers</option>
	<option value="49">Press room</option>
	<option value="51">Site Map</option>
</select>
</div>
</section>

CSS

.scrollable{
    display:inline-block;
    vertical-align:top;
    overflow-y: scroll;
    overflow-x: hidden;
    border:solid grey 1px;
    height: 400px;
}

.scrollable select{
    padding:10px;
    margin:-5px -20px -5px -5px;
}

#CustomerSelectDiv::-webkit-scrollbar{
width:8px;
} 

#CustomerSelectDiv::-webkit-scrollbar-thumb{
background-color:lightgrey;
border-radius:10px;
}

#CustomerSelectDiv::-webkit-scrollbar-thumb:hover{
background-color:grey;
border:1px solid #333333;
}

#CustomerSelectDiv::-webkit-scrollbar-thumb:active{
background-color:grey;
border:1px solid #333333;
} 

select {
  display: inline-block;
  position: relative;
  /* width: 200px; */
  height: 600px;
  font-size: 12px;
  outline: none;
  border: 1px solid #f5f5f5;
  padding: 5px;
  border-radius: 4px;
  overflow: hidden;
  /*padding:10px; margin:-5px -20px -5px -5px;*/
}

JavaScript

var sel = document.getElementById('lbPages');
    sel.addEventListener('click', function(el){
        var options = this.children;

        for(var i=0; i < this.childElementCount; i++){
            options[i].style.color = 'black';
            options[i].style.background = 'none';
        }

        var selected = this.children[this.selectedIndex];
        selected.style.background = '#333';
        selected.style.color = '#fff';
    }, false);