By using css properties we can add space in between options of a select element and it will work well in browsers like Firefox and Chrome. However, it will not work in IE. We can’t style “<option>” elements in Internet Explorer with most of the css properties. Only background and font color property will work in IE other proprties will inheritfrom the Windows operating system.
If we want to create a consistent appearance across the browser, we have to use custom JavaScript/jQuery to replaces the default select element style on your page.
Here is a simple code to create custom select style, only thing you have to do is add class name to the select box you want to style
<!DOCTYPE html>
<html>
<head>
<title>Demo :: Custom Select box</title>
<style type="text/css">
.custom-drop-down {
display: none;
}
.custom-dropdown-button {
cursor: pointer;
min-width: 100px;
border: 1px solid;
padding: 10px;
width:120px;
position:relative;
}
.custom-dropdown-button a{
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
position: absolute;
right: 10px;
top: 13px;
}
.custom-dropdown-list {
position: absolute;
top: 8px;
left: 8px;
z-index: 1;
margin-top: 40px;
padding: 0;
background-color: #222;
}
.custom-dropdown-list li {
display: none;
}
.custom-dropdown-list li span {
display: inline-block;
line-height: 50px;
min-width: 180px;
width: 100%;
padding: 0 15px 0 20px;
background-color: #222;
color: #FFF;
box-sizing: border-box;
}
.custom-dropdown-list li span:hover,
.custom-dropdown-list li span:focus {
color: #eee;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".custom-drop-down").before("<div class='custom-dropdown-button'></div>");
$('.custom-drop-down').before('<ul class="custom-dropdown-list"></ul>');
$('.custom-drop-down option').each(function() {
$('.custom-dropdown-list').append('<li><span value="' + $(this).val() + '" >' + $(this).text() + '</span></li>');
});
$('.custom-dropdown-button').html('<span>' + $('select').find(':selected').text() + '</span>' + '<a href="javascript:void(0);"></a>');
$('.custom-dropdown-list ul li').each(function() {
if ($(this).find('span').text() == $('select').find(':selected').text()) {
$(this).addClass('active');
}
});
$('.custom-dropdown-list span').on('click', function(){
var dropDown_text = $(this).text();
var dropDown_val = $(this).attr('value');
$('.custom-dropdown-button').html('<span>' + dropDown_text + '</span>' + '<a href="javascript:void(0);"></a>');
$('.custom-dropdown-list span').parent().removeClass('active');
$(this).parent().addClass('active');
$('select[name=options]').val(dropDown_val);
$('.custom-dropdown-list li').slideUp();
});
$('body').on('click','.custom-dropdown-button', function(){
$('.custom-dropdown-list li').slideToggle();
});
});
</script>
</head>
<body>
<select name="options" class="custom-drop-down">
<option value="One">One</option>
<option value="Two" selected>Two</option>
<option value="Three">Three</option>
<option value="Four">Four</option>
</select>
</body>
</html>
