JSFiddle - React, Tailwind, and code Playground

by webmasterorgil

HTML

<div class="selectBox">
    <select>
        <option value="Israel">Israel</option>
        <option value="United States">United States</option>
        <option value="United Kingdom">United Kingdom</option>
    </select>
    <div class="selectText"></div>
</div>

CSS

.selectBox {  
     position: relative;  
     display: inline-block;  
     *display: inline;  
     width:140px;
     height:25px;
     zoom: 1;  
     border: 1px solid #0082E5;  
     border-radius: 5px;
     box-shadow: 0 1px 3px #999;  
    
    background: #004799; /* Old browsers */
    background: -moz-linear-gradient(top,  #004799 0%, #0082e5 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#004799), color-stop(100%,#0082e5)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #004799 0%,#0082e5 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #004799 0%,#0082e5 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #004799 0%,#0082e5 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #004799 0%,#0082e5 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004799', endColorstr='#0082e5',GradientType=0 ); /* IE6-9 */
 } 

.selectBox select {  
     z-index: 10;  
     position: relative;  
     border: none;  
     background: none;  
     outline: none;  
     width:100%;
     height:25px;
     opacity: 0;  
     -webkit-appearance: none;  
     filter: alpha(opacity=0);  
 } 

 .selectBox .selectText {  
     color:#fff; 
     font: 13px Georgia;
     z-index: 9;  
     position: absolute;  
     left: 6px;  
     top: 4px;
     display: inline-block;  
     *display: inline;  
     zoom: 1;  
     background: transparent;
 } 

 .selectBox:after {  
     content:" "; 
     position: absolute;  
     z-index: 9;  
     right: 10px;
     top: 10px;
     
     border-top: 5px solid #fff;  
     border-right: 5px solid transparent;
     border-left: 5px solid transparent;
 }

JavaScript

$("select").each(function(){  
    var val = $(this).children("option:selected").text();  
    $(this).next(".selectText").text(val);  
    $(this).change(function(){  
        var val = $(this).children("option:selected").text();  
        $(this).next(".selectText").text(val);  
    }); 
});