Nice Select Box Replacement with jQuery and CSS

A super simple jQuery plugin to replace the native select box that allows you to pick an option in a nice popup box.

How to use it:

1. Create a native select box in the document.

<select id="demo" name="demo">
  <option value="Html5">Html5</option>
  <option value="CSS3">CSS3</option>
  <option value="Javascript">Javascript</option>
  <option value="Ruby">Ruby</option>
  <option value="Python">Python</option>
  <option value="C++">C++</option>
</select>

2. The required CSS to style the select box.

.select_wrapper {
  background: #6a8547 url("arrow.png") no-repeat top 15px right 12px;
  line-height: 36px;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
}

.select_wrapper:hover { background: #566c3a url("arrow.png") no-repeat top 15px right 12px; }

.select_wrapper span {
  display: block;
  margin: 0 30px 0 15px;
}

.select_wrapper .select_inner {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  color: #687278;
  display: none;
  position: absolute;
  left: 0;
  top: -100%;
  width: 100%;
  z-index: 3;
}

.select_wrapper .select_inner li {
  border-bottom: 1px solid #eee;
  padding: 0 15px;
}

.select_wrapper .select_inner li:hover { background: #eee; }

.select_wrapper .select_inner li:last-child {
  border: none;
  border-radius: 0 0 5px 5px;
}

.select_wrapper .select_inner li:first-child { border-radius: 5px 5px 0 0; }

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline
}

3. Load the necessary jQuery library at the bottom of the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

4. The Javascript.

$(document).ready(function (){
$('select').wrap('<div class="select_wrapper"></div>')
$('select').parent().prepend('<span>'+ $(this).find(':selected').text() +'</span>');
$('select').parent().children('span').width($('select').width());	
$('select').css('display', 'none');					
$('select').parent().append('<ul class="select_inner"></ul>');
$('select').children().each(function(){
  var opttext = $(this).text();
  var optval = $(this).val();
  $('select').parent().children('.select_inner').append('<li id="' + optval + '">' + opttext + '</li>');
});



$('select').parent().find('li').on('click', function (){
  var cur = $(this).attr('id');
  $('select').parent().children('span').text($(this).text());
  $('select').children().removeAttr('selected');
  $('select').children('[value="'+cur+'"]').attr('selected','selected');					
  console.log($('select').children('[value="'+cur+'"]').text());
});
$('select').parent().on('click', function (){
  $(this).find('ul').slideToggle('fast');
});
});

---

This awesome jQuery plugin is developed by pvrt. For more Advanced Usages, please check the demo page or visit the official website.