JSFiddle - React, Tailwind, and code Playground

by ducas

HTML

<div class="placeholder">
    <select class="placeholder">
        <option></option>                    
        <option>Hello</option>
        <option>World</option>
    </select>
</div>

CSS

select {
    border-color: blue;
}
.does-not-have-value {
    border-color: red;
}

JavaScript

$('.placeholder')
    .each(function () {
        var select = $(this);
        var updateClass = function () {
            var selectedValue = select.find('option:selected').val();
            if (selectedValue) {
                select.removeClass('does-not-have-value');
            } else {
                select.addClass('does-not-have-value');
            }
        };
        updateClass();
        select.change(updateClass);
    })