JSFiddle - React, Tailwind, and code Playground

by daer

HTML

<select name="">
    <option>17 - 20</option>
    <option>21 - 30</option>
    <option>31 - 40</option>
    <option>41 год и более</option>
</select>

CSS

body {
    font: 14px Arial, Helvetica, 'Helvetica CY', 'Nimbus Sans L', sans-serif;
    padding: 10px;
}

.select-bl {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 2px;
    box-shadow: inset 0 4px 1px -3px rgba(0,0,0,0.1);
    display: block;
    position: relative;
    width: 400px;
    height: 34px;
    margin: 0 0 15px 0;
    line-height: 32px;
    zoom: 1;
}

.select-bl:after {
    content: '▼';
    display: block;
    position: absolute;
    top: 2px;
    right: 8px;
    font-size: 10px;
}

.select-bl.focus {
    border-color: #52c9e2;
}

.select-bl.disabled {
    opacity: 0.4;
}

    .select-bl__tx {
        display: block;
        position: absolute;
        overflow: hidden;
        top: 0;
        right: 22px;
        left: 8px;
        height: 32px;
        line-height: 32px;
        white-space: nowrap;
    }

    .select-bl select {
        border: none;
        display: block;
        position: relative;
        width: 100%;
        height: 32px;
        margin: 0;
        padding: 0;
        line-height: 32px;
        opacity: 0;
        filter: alpha(opacity=0);
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    
        .select-bl option {
            padding: 2px 6px;
        }

JavaScript

var $selects = $('select');

$selects.each(function () {
    var classes = $(this).attr('class');
    
    $(this).wrap('<div class="select-bl ' + classes + '"></div>');
    if ($(this).is(':disabled')) {
        $(this).parents('.select-bl').addClass('disabled');
    }
    
    $(this).on('focus', function() {
        $(this).parent().addClass('focus');
    });
    
    $(this).on('blur', function() {
        $(this).parent().removeClass('focus');
    });
    
    var $ops = $(this).find('option');
    $ops.each(function () {
        if ($(this).is('[selected]')) {
            $(this).addClass('selected');
        }
    });
    
    if ( $ops.hasClass('selected') ) {
        var $selectedText = $(this).find('option.selected').text();
        $(this).before('<span class="select-bl__tx">' + $selectedText + '</span>');
    }
    else {
        var $firstText = $(this).find('option:first').text();
        $(this).before('<span class="select-bl__tx">' + $firstText + '</span>');
    }
    
    $(this).change(function () {
        var $text = $(this).find('option:selected').text();
        $(this).siblings('.select-bl__tx').text($text);
    });
});