JSFiddle - React, Tailwind, and code Playground

by BinaryAcid

HTML

<body>
<form method="post" action="#">
  <select name="prettyfied" class="prettyfied">
    <option value="0" selected="selected">Choose a Prettyfied Element</option>
    <option value="1" data-icon="assets/img/icon.png" data-html-text="Element One&lt;i&gt;don't pick me!&lt;/i&gt;">Element One</option>
    <option value="2" data-icon="assets/img/icon.png" data-html-text="Element Two&lt;i&gt;second's the best&lt;/i&gt;">Element Two</option>
    <option value="3" data-icon="assets/img/icon.png" data-html-text="Element Three&lt;i&gt;i smell, but friendly&lt;/i&gt;">Element Three</option>
    <option value="4" data-icon="assets/img/icon.png" data-html-text="Element Four&lt;i&gt;go for the underdog&lt;/i&gt;">Element Four</option>
  </select>
</form>
    
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

CSS

body { font-family: Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif }

.prettyfied-select {
  height: 33px;
  display: inline-block;
  min-width: 200px;
  position: relative;
  background: #eee;
}

.prettyfied-select .prettyfied-select-box,
.prettyfied-select .dropDown {
  font-size: 11px;
  font-weight: bold;
  color: #444;
}

.prettyfied-select .prettyfied-select-box {
  position: absolute;
  height: 100%;
  width: 100%;
  line-height: 33px;
  cursor: pointer;
  background-image:url('../img/arrow.png');
  background-position: right 9px;
  background-repeat: no-repeat;
  border: 1px solid #ccc;
  border-radius: 2px;
}

.prettyfied-select .prettyfied-select-box span {
  padding-left: 8px;
}

.prettyfied-select .dropDown {
  position: absolute;
  z-index: 999;
  top: 32px;
  left: 0px;
  min-width: 200px;
  padding: 0;
  list-style-type: none;
  margin: 0;
  border: 1px solid;
  border-top: 0;
  background: #eee;
  border-radius: 0 0 2px 2px;
}

.prettyfied-select .prettyfied-select-box:hover,
.prettyfied-select .prettyfied-select-box.expanded,
.prettyfied-select .dropDown {
  box-shadow: 1px 1px 1px #ccc;
  border-color: #666;
}

.prettyfied-select .dropDown.is-hidden {
  border-color: #ccc;
  box-shadow: none;
}

.prettyfied-select .dropDown li {
  display: block;
  line-height: 16px;
  padding: 8px 0 8px 8px;
  cursor: pointer;
}

.prettyfied-select .dropDown li.hover {
  background: #e5e5e5;
}

.prettyfied-select .dropDown li img {
  float: left;
  margin-right: 5px;
}
.prettyfied-select .dropDown li i {
  display: block;
  margin: 0 0 0 21px;
  font-weight: normal;
}

JavaScript

$(document).ready(function() {
  // The select element to be replaced:
  var select = $('select.prettyfied');

  var selectBoxContainer = $('<div>',{
    width     : select.outerWidth(),
    className : 'prettyfied-select',
    html      : '<div class="prettyfied-select-box"><span></span></div>'
  });

  var dropDown = $('<ul>',{className:'dropDown'});
  var selectBox = selectBoxContainer.find('.prettyfied-select-box');

  // Looping though the options of the original select element
  select.find('option').each(function(i) {
    var option = $(this);
    if(i == select.attr('selectedIndex')) {
      selectBox.html('<span>'+option.text()+'</span>');
    }

    // As of jQuery 1.4.3 we can access HTML5
    // data attributes with the data() method.
    if(!option.data('html-text')) {
      return true;
    }

    // Creating a dropdown item according to the
    // data-icon and data-html-text HTML5 attributes:
    var li = $('<li>',{
      html: '<img src="'+option.data('icon')+'"><span>' + option.data('html-text') + '</span>'
    });

    li.click(function() {
      selectBox.html('<span>'+option.text()+'</span>');
      dropDown.trigger('hide');

      // When a click occurs, we are also reflecting
      // the change on the original select element:
      select.val(option.val());

      return false;
    }).hover(function() {
      $(this).addClass('hover');
    }, function() {
      $(this).removeClass('hover');
    });

    dropDown.append(li);
  });

  selectBoxContainer.append(dropDown.hide());
  select.hide().after(selectBoxContainer);

  // Binding custom show and hide events on the dropDown:
  dropDown.bind('show',function(){
    if(dropDown.is(':animated')){
      return false;
    }
    selectBox.addClass('expanded');
    dropDown.slideDown();
  }).bind('hide',function(){
    if(dropDown.is(':animated')){
      return false;
    }
    selectBox.removeClass('expanded');
    dropDown.addClass('is-hidden');
    dropDown.slideUp(function() {
     ...