JSFiddle - React, Tailwind, and code Playground

by Ronny

HTML

<form>
<div>
<select class="select">
    <option value="#" class="category">- select -</option>
    <option value="/Products.aspx" class="category">Products</option>
      <option value="/Products.aspx">&nbsp;&nbsp; Our Products</option>
    <option value="/AboutUs/media-coverage.aspx" class="category">&nbsp;&nbsp;News &amp; Events</option>
      <option value="/AboutUs/media-coverage.aspx">&nbsp;&nbsp; Media Coverage</option>
      <option value="/AboutUs/press-releases.aspx">&nbsp;&nbsp; Press Releases</option>
      <option value="/AboutUs/Events.aspx">&nbsp;&nbsp; Events</option>
    <option value="/AboutUs/Default.aspx" class="category">Company</option>
      <option value="/AboutUs/Default.aspx" class="category">About Us</option>
      <option value="/AboutUs/media-coverage.aspx">&nbsp;&nbsp; Media Coverage</option>
      <option value="/AboutUs/Leadership.aspx">&nbsp;&nbsp; Leadership</option>
      <option value="/AboutUs/Publishers.aspx">&nbsp;&nbsp; Our Publishers</option>
      <option value="/AboutUs/Locations.aspx">&nbsp;&nbsp; Locations</option>
      <option value="/AboutUs/Contact.aspx">&nbsp;&nbsp; Contact</option>
</select>
</div>
</form>

CSS

body {
    margin: 10px;
}

/* all form DIVs have position property set to relative so we can easily position newly created SPAN */
form div{position:relative;} 

/* setting the width and height of the SELECT element to match the replacing graphics */
select.select{
    position:relative;
    z-index:10;
    width:166px !important;
    height:26px !important;
    line-height:26px;
}

/* dynamically created SPAN, placed below the SELECT */
span.select{
    position:absolute;
    bottom:0;
    float:left;
    left:0;
    width:166px;
    height:26px;
    line-height:26px;
    text-indent:10px;
    cursor:default;
    z-index:1;
    background: #e8e8e8;
    
    background: rgb(242,244,245);
background: -moz-linear-gradient(top,  rgba(242,244,245,1) 0%, rgba(242,244,245,1) 45%, rgba(240,242,243,1) 48%, rgba(222,224,225,1) 50%, rgba(223,225,226,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,244,245,1)), color-stop(45%,rgba(242,244,245,1)), color-stop(48%,rgba(240,242,243,1)), color-stop(50%,rgba(222,224,225,1)), color-stop(100%,rgba(223,225,226,1)));
background: -webkit-linear-gradient(top,  rgba(242,244,245,1) 0%,rgba(242,244,245,1) 45%,rgba(240,242,243,1) 48%,rgba(222,224,225,1) 50%,rgba(223,225,226,1) 100%);
background: -o-linear-gradient(top,  rgba(242,244,245,1) 0%,rgba(242,244,245,1) 45%,rgba(240,242,243,1) 48%,rgba(222,224,225,1) 50%,rgba(223,225,226,1) 100%);
background: -ms-linear-gradient(top,  rgba(242,244,245,1) 0%,rgba(242,244,245,1) 45%,rgba(240,242,243,1) 48%,rgba(222,224,225,1) 50%,rgba(223,225,226,1) 100%);
background: linear-gradient(to bottom,  rgba(242,244,245,1) 0%,rgba(242,244,245,1) 45%,rgba(240,242,243,1) 48%,rgba(222,224,225,1) 50%,rgba(223,225,226,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f4f5', endColorstr='#dfe1e2',GradientType=0 );

    
    box-shadow: 1px 1px 0 rgba(239, 241, 242, 0.8) inset, -1px -1px 0 rgba(239, 241, 242, 0.8) inset, -1px -1px 0...

JavaScript

$(document).ready(function(){    
    if (!$.browser.opera) {
        $('select.select').each(function(){
            var title = $(this).attr('title');
            if( $('option:selected', this).val() != ''  ) title = $('option:selected',this).text();
            $(this)
                .css({'z-index':10,'opacity':0,'-khtml-appearance':'none'})
                .after('<span class="select">' + title + '</span>')
                .change(function(){
                    val = $('option:selected',this).text();
                    $(this).next().text(val);
                    
                    // navigate to the selected url
                    console.log(this.value);
                    var link = document.createElement('a');
                    link.href = this.value;
                    location = link.href;
                })
        });
    };
});