JSFiddle - React, Tailwind, and code Playground

HTML

<div class="styled-select">
  <select id="source" name="example_length" aria-controls="example">
    <option selected="selected" value="10">10</option>
    <option value="25">25</option>
    <option value="50">50</option>
    <option value="100">100</option>
  </select>

CSS

.styled-select {
   no-repeat 84% 0;
  height: 29px;
  overflow: hidden;
  width: 70px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-color: #1abc9c;
  display: inline-block;
  vertical-align: middle;
}

.styled-select select {
  background: transparent;
  border: none;
  font-size: 14px;
  color: #000;
  height: 29px;
  padding: 5px; // If you add too much padding here, the options won't show in IE
  width: 90px;
}

/* new */

.dropdown dd,
.dropdown dt,
.dropdown ul {
  margin: 0px;
  padding: 0px;
}

.dropdown dd {
  position: relative;
}

.dropdown a,
.dropdown a:visited {
  color: #000;
  text-decoration: none;
  outline: none;
}

.dropdown a:hover {
  color: #fff;
}

.dropdown dt a {
  height: 29px;
  line-height:29px;
  overflow: hidden;
  background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 84% 0;
  width: 75px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-color: #1abc9c;
  display: inline-block;
  vertical-align: middle;
  padding-left: 5px;
}

.dropdown dt a span {
  cursor: pointer;
  display: block;
}

.dropdown dd ul {
  background: #1abc9c none repeat scroll 0 0;
  color: #000;
  display: none;
  left: 0px;
  padding: 5px 0px;
  position: absolute;
  top: 2px;
  width: 80px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  list-style: none;
}

.dropdown span.value {
  display: none;
}

.dropdown dd ul li a {
  padding: 5px;
  display: block;
}

.dropdown dd ul li a:hover {
  background-color: #000;
}

JavaScript

$(document).ready(function() {
   createDropDown();

   $(".dropdown dt a").click(function() {
     $(".dropdown dd ul").toggle();
   });

   $(document).bind('click', function(e) {
     var $clicked = $(e.target);
     if (!$clicked.parents().hasClass("dropdown"))
       $(".dropdown dd ul").hide();
   });

   $(".dropdown dd ul li a").click(function() {
     var text = $(this).html();
     $(".dropdown dt a").html(text);
     $(".dropdown dd ul").hide();

     var source = $("#source");
     source.val($(this).find("span.value").html())
   });
 });

 function createDropDown() {
   var source = $("#source");
   var selected = source.find("option[selected]");
   var options = $("option", source);

   $("body").append('<dl id="target" class="dropdown"></dl>')
   $("#target").append('<dt><a href="#">' + selected.text() +
     '<span class="value">' + selected.val() +
     '</span></a></dt>')
   $("#target").append('<dd><ul></ul></dd>')

   options.each(function() {
     $("#target dd ul").append('<li><a href="#">' +
       $(this).text() + '<span class="value">' +
       $(this).val() + '</span></a></li>');
   });
 }