JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<select name="" id="">
    <option value="JavaScript">JavaScript</option>
    <option value="Ruby">Ruby</option>
    <option value="Python">Python</option>
    <option value="Shell">Shell</option>
    <option value="Java">Java</option>
    <option value="PHP">PHP</option>
    <option value="C">C</option>
    <option value="Pearl">Perl</option>
    <option value="C++">C++</option>
    <option value="Objective-C">Objective-C</option>
</select>

CSS

body { margin:20px; }

.candyWrapper {
    position: relative;
    font-size: 15px;
    line-height: 15px;
    font-family:sans-serif;
    text-shadow:1px 1px 1px #3cab1e;
    display: block;
    float: left;
}

.candyWrapper .selected {
    position: relative;
    text-decoration: none;
    padding: 8px 30px 8px 10px;
    width:100%;
    display: block;
    color:#fff;
    border-radius:3px;
    border:1px solid #3cab1e;
    background: #aff193;
    background: -moz-linear-gradient(top,  #aff193 0%, #aff193 2%, #68e32f 3%, #5bd222 45%, #59d021 45%, #58ce20 48%, #57cd1f 53%, #56cb1d 53%, #4bbc10 85%, #48b90d 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aff193), color-stop(2%,#aff193), color-stop(3%,#68e32f), color-stop(45%,#5bd222), color-stop(45%,#59d021), color-stop(48%,#58ce20), color-stop(53%,#57cd1f), color-stop(53%,#56cb1d), color-stop(85%,#4bbc10), color-stop(100%,#48b90d));
    background: -webkit-linear-gradient(top,  #aff193 0%,#aff193 2%,#68e32f 3%,#5bd222 45%,#59d021 45%,#58ce20 48%,#57cd1f 53%,#56cb1d 53%,#4bbc10 85%,#48b90d 100%);
    background: -o-linear-gradient(top,  #aff193 0%,#aff193 2%,#68e32f 3%,#5bd222 45%,#59d021 45%,#58ce20 48%,#57cd1f 53%,#56cb1d 53%,#4bbc10 85%,#48b90d 100%);
    background: -ms-linear-gradient(top,  #aff193 0%,#aff193 2%,#68e32f 3%,#5bd222 45%,#59d021 45%,#58ce20 48%,#57cd1f 53%,#56cb1d 53%,#4bbc10 85%,#48b90d 100%);
    background: linear-gradient(top,  #aff193 0%,#aff193 2%,#68e32f 3%,#5bd222 45%,#59d021 45%,#58ce20 48%,#57cd1f 53%,#56cb1d 53%,#4bbc10 85%,#48b90d 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aff193', endColorstr='#48b90d',GradientType=0 );        
}

.candyWrapper:hover .selected {
    cursor: pointer;
    background: #b4fd96;
    background: -moz-linear-gradient(top,  #b4fd96 0%, #b4fd96 2%, #71f733 3%, #71f733 7%, #69ec2b 32%, #58d61a 70%, #50cb11 100%);
    background: -webkit-gradient(linear, left top, left bottom,...

JavaScript

jQuery.fn.candyDropdown = function() {
    return $(this).each(function() {
         
        var el = $(this), 
            div = $("<div class='candyWrapper'><a href='#' class='selected'></a><ul></ul></div>"), 
            selected = '', 
            ul = $("ul",div.insertBefore(el));
        
        // Loop through Options
        $("option", el).each(function(i, el){
            var el = $(this), 
                select = (selected == el) ? " selected" : "";
            if(el.is(":selected")){
                selected = el.text();
            }
            $("<li><a href='#'>"+el.text()+"</a></li>").appendTo(ul);
        });
        
        // Bind to Button
        $(".selected", div).text(selected).bind("click", function(e){
            e.preventDefault();
            var el = $(this), 
                div = el.parent(), 
                ul = $("ul", div);
            if(ul.is(":hidden")){
                ul.fadeIn(200);
            } else {
                ul.fadeOut(200);
            } 
        });
        
        // Bind to Options
        $("ul li a", div).bind("click", function(e){
            e.preventDefault();
            var el = $(this), 
                ul = el.parents("ul"),
                div = ul.parents(".candyWrapper"), 
                selected = $(".selected", div),
                input = div.next();
            input.find("option:selected").removeAttr("selected");
            input.find("option[value='"+el.text()+"']").attr("selected","selected");
            selected.text(el.text());
            ul.fadeOut(200);
        });
        
        // Hide Select
        el.hide();
    });
};
   
// DOM Load
jQuery(function(){
    
    // Bind Candy Dropdown to Selects
    $('select').candyDropdown();    

});