<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <select name="fancy-select" class="fancy-select"> <option value="Option 1">Pakistan</option> <option value="Option 2">Saudia</option> <option value="Option 3">UAE</option> <option value="Option 4">Turkey</option> <option value="Option 5">Palstin</option> </select>

* { box-sizing: border-box; } body, html { font-family: helvetica neue, helvetica, arial, sans-serif; font-weight: 200; overflow-x: hidden; overflow-y: scroll; } body p, html p { max-width: 600px; margin: 0 auto 20px auto; font-size: 16px; line-height: 24px; } .fancy-select { position: absolute; left: 5000px; } .newSelect { position: relative; display: block; max-width: 300px; margin: 100px auto; } .newSelect:hover { height: auto; } .newSelect .selectedOption { background: white; padding: 20px; font-size: 18px; line-height: 18px; height: 58px; border: 1px solid #a9cdcf; color: #a9cdcf; cursor: pointer; position: relative; border-radius: 3px 3px 0 0; } .newSelect .selectedOption:after { font-family: FontAwesome; content: '\f0dc'; position: absolute; right: 20px; color: #af0606; } .newSelect .selectedOption.selected { color: #134b4e; } .newSelect .newOptions { position: absolute; width: 100%; } .newSelect .newOptions .newOption { display: none; top: 0; left: 0; font-size: 18px; line-height: 18px; height: 58px; padding: 20px; background: #ffe100; color: white; cursor: pointer; } .newSelect .newOptions .newOption:hover { background: #f80046; } .newSelect.clicked .newOption { display: block; } .newSelect.closed .newOption { display: none; }

$(document).ready(function(){ // Create the new select var select = $('.fancy-select'); var selectOption = $('.fancy-select option'); select.wrap('<div class="newSelect"></div>'); $('.newSelect').prepend('<div class="selectedOption">Choose an Option</div><div class="newOptions"></div>'); selectOption.each(function(){ var optionContents = $(this).html(); var optionValue = $(this).attr('value'); $('.newOptions').append('<div class="newOption" data-value="'+optionValue+'">'+optionContents+'</div>') }); // new select functionality var newSelect = $('.newSelect'); var newOption = $('.newOption'); var itemHeight = $('.newOption').height(); var itemCount = $('.newOption').length; var optionsHeight = itemHeight * itemCount; newSelect.click(function(){ $(this).addClass('clicked'); }); // update based on selection newOption.on('mouseup',function(){ var newValue = $(this).attr('data-value'); $(this).parent().prev('.selectedOption').html(newValue).addClass('selected'); // update the actual input selectOption.each(function(){ var optionValue = $(this).attr('value'); if (newValue == optionValue){ $(this).prop('selected',true); } else { $(this).prop('selected',false); } }) }); newSelect.on('mouseleave',function(){ $(this).removeClass('clicked'); }); });