Custom Select Drop-down Style

select_style_css.css

/* Parent Style */
.search-select-parent {
  float: left;
  margin: 5px 0 0 8px;
  position: relative;
}

/* Select Style */
.search-select-parent select {
  display: block;
  float: left;
  height: 25px;
  margin: 0;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=00);
  -moz-opacity:0;
  -khtml-opacity: 0;
  opacity: 0;
  position: relative;
  position: relative;
  width: 168px;
  z-index: 100;
}

/* Option Style */
.search-select-parent select option {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity:1;
-khtml-opacity: 1;
opacity: 1;
position: relative;
}

/* Span Style */
.search-select-parent .sort-select { 
  background: url("path-to-custom-background.png") no-repeat scroll 0 0 transparent;
  border: medium none;
  color: #393939;
  display: block;
  font-size: 13px;
  height: 25px;
  left: 0;
  line-height: 26px;
  padding: 0 0 0 10px;
  position: absolute;
  top: 0;
  width: 158px;
}

select_style_js.js

if ( $('.search-select-parent select').length ) {
    $('.search-select-parent select').change(function() {
        var str = '';
        $('.search-select-parent select option:selected').each(function () {str += $(this).text(); });
        $('span.sort-select').text(str);
    }).trigger('change');
}

select_style_markup.html

<div class="search-select-parent">
    <select id="sort-result" name="sort-result">
        <option selected="selected" value="">Select</option>
        <option value="Ascending">Ascending</option>
        <option value="Descending">Descending</option>
    </select><!-- End of #sort-result -->
    <span class="sort-select">Ascending</span>
</div><!-- End of .search-select-parent -->