JSFiddle - React, Tailwind, and code Playground

by Junior Hernández

HTML

<div class="content">
        <input type="text" name="otro" tabindex="1">
        <div class="ddselect">
            <div class="title"></div>
            <select name="opciones" id="opciones" tabindex="2">
                    <option value="Elige">-- Elige --</option>
                    <option value="Manzanas">Manzanas</option>
                    <option value="Uvas">Uvas</option>
                    <option value="Fresas">Fresas</option>
                    <option value="Melocotón">Melocotón</option>
                    <option value="Plátanos">Plátanos</option>
                    <option value="Kiwi">Kiwi</option>
                    <option value="Peras">Peras</option>
            </select>
        </div>
</div>

CSS

* {
        font: normal 14px/100% Arial,Helvetica,sans-serif;
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
}

.content {
        position: relative;
        margin: 30px auto 0;
        width: 200px;
}

input, select {
        color: #666;
        vertical-align: middle;
        width: 180px;
        height: 34px;
        padding: 0 10px;
        margin-bottom: 20px;
        border: solid 1px #DDD;
}

.ddselect { 
        position: relative; 
        overflow: hidden;
}
.ddselect, .ddselect select { 
        width: 120px; 
        height: 34px;1234
        
}
.ddselect .title, .ddselect select { color: #666; }
.ddselect .title {
        text-shadow: 1px 1px 1px #FFF;
        height: 23px;
        padding: 9px 0 0 10px;
        background-color: #DDD;
        border-radius: 5px; 
}
.ddselect select {
        vertical-align: middle;
        position: absolute;
        top: 0;
        cursor: pointer;
}

JavaScript

function xDDselect(sltr) {
    var box = $(sltr);

    box.each(function() {
        var title = $(this).children('.title'),
            select = $(this).children('select'),
            options = select.children('option');

        select.css({
            '-ms-filter': 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)',
            'filter': 'alpha(opacity=0)',
            'opacity': 0
        });
        getSelected();

        select.change(getSelected);

        function getSelected() {
            options.each(function() {
                if ($(this).attr('selected')) title.text($(this).text());
            });
        };
    });
};

$('[name="otro"]').focus();
xDDselect('.ddselect');