HTML
<div class="form-group">
<label>I</label>
<select class="first">
<option value="1">Single person</option>
<option value="2">Group</option>
</select>
<div class="custom_select" data-connect="first">
<div class="current_option" data-value="">
<span>Single person</span>
<b><img src="http://support.eye.fi/wp-content/uploads/2007/09/arrow-down.png.pagespeed.ce.sb6_oS5SGc.png"/></b>
</div>
<ul class="custom_options">
<li data-value="1">Single person</li>
<li data-value="2">Group</li>
</ul>
</div>
</div>
<div class="form-group">
<label>Want to volunteer in ...</label>
<select class="second">
<option value="1">Center</option>
<option value="2">North</option>
<option value="3">South</option>
</select>
<div class="custom_select" data-connect="second">
<div class="current_option" data-value="">
<span>Center</span>
<b><img src="http://support.eye.fi/wp-content/uploads/2007/09/arrow-down.png.pagespeed.ce.sb6_oS5SGc.png"/></b>
</div>
<ul class="custom_options">
<li data-value="1">Center</li>
<li data-value="2">North</li>
<li data-value="3">South</li>
</ul>
</div>
</div>
<div class="form-group">
<label>Volunteering category</label>
<select class="third">
<option value="">Select</option>
<option value="1">The Initiative For Nutrition Insecurity</option>
<option value="2">Resource Development</option>
<option value="3">Latet Youth</option>
<option value="4">Latet Atid</option>
</select>
<div class="custom_select" data-connect="third">
<div class="current_option" data-value="">
<span>Select</span>
<b><img src="http://support.eye.fi/wp-content/uploads/2007/09/arrow-down.png.pagespeed.ce.sb6_oS5SGc.png"/></b>
</div>
<ul class="custom_options">
<li data-value="">Select</li>
<li data-value="1">The Initiative For Nutrition Insecurity</li>
<li data-value="2">Resource Development</li>
<li data-value="3">Latet Youth</li>
<li data-value="4">Latet Atid</li>
</ul>
</div>
</div>
CSS
.form-group {
margin: 20px 50px;
}
.form-group label {
display: inline-block;
margin-bottom: 5px;
}
.custom_select {
min-width: 225px;
position: relative;
width: auto;
text-align: left;
display:none;
}
.current_option {
background: white;
padding: 0 10px;
border: 1px solid black;
line-height: 30px;
cursor: pointer;
}
.current_option:hover {
background: #FBFBFB;
}
.current_option b{
height: 100%;
width: 28px;
text-align: center;
float: right;
border-left: 1px solid black;
}
.current_option b img{
width: 12px;
height: 12px;
}
.custom_options {
display: none;
position: absolute;
box-sizing: border-box;
width: 100%;
margin-top: -1px;
padding: 0;
background: #FBFBFB;
border: 1px solid black;
border-radius: 0 0 4px 4px;
z-index: 10;
}
.custom_options li {
list-style: none;
padding: 5px 10px;
height: 25px;
line-height: 25px;
text-align: left;
}
.custom_options li:last-child {
border-radius: 0 0 4px 4px;
}
.custom_options li:hover{
background: #d2d2d2;
cursor: pointer;
}
JAVASCRIPT
$(function(){
$(document).on('click', function(e){
if( $(e.target).closest('.custom_select').length === 0 ) {
$('.custom_options').removeClass('active').hide();
} else if ( e.target.classList.contains('current_option') && e.target.nextElementSibling.classList.contains('active') ) {
$('.custom_options').removeClass('active').hide();
} else if ( e.target.nodeName !== 'LI' ){
$('.custom_options').removeClass('active').hide();
$(e.target).closest('.custom_select').find('.custom_options').addClass('active').toggle();
}
});
// Fallback. If no jquery, selects will display and customs will not
$('.custom_select').css('display', 'block');
$('select').css('display', 'none');
var that;
$('.current_option').on('click', function(e) {
that = $(this).parent().data('connect');
$(this).parent().find('.custom_options').toggle();
});
$('.custom_options').on('click', 'li', function(e) {
var selects = $('select');
for (var i = 0; i < selects.length; i++) {
if ($(selects[i]).hasClass(that)) {
that = $(selects[i]);
}
}
var choosenValue = $(this).data('value'),
choosenText = $(this).text();
$(that).val(choosenValue).prop('selected', true);
$(this).closest('.custom_select').find(".current_option")
.data('value', choosenValue)
.find('span')
.text(choosenText);
$('.custom_options').removeClass('active').hide();
});
})
