JSFiddle - React, Tailwind, and code Playground

by hollandben

HTML

<select class="select">
    <option value="">Default</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

<select class="select">
    <option value="">Default</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

CSS

.grey {
    color: grey;
}

JavaScript

(function() {
    var selectInputs = document.querySelectorAll('select'),
        i = 0,
        len = selectInputs.length;
    
    for (i; i < len; i++) {
        var el = selectInputs[i];
        
        el.addEventListener('change', checkIfValueIsDefault);
        el.addEventListener('focus', darkenText);
        checkIfValueIsDefault.call(selectInputs[i]);
    }
    
    function checkIfValueIsDefault() {
        if(this.value == '') {
            lightenText.call(this);
        } else {
            darkenText.call(this);
        }
    }
    
    function lightenText() {
        this.classList.add('grey');
    }
    
    function darkenText() {
        this.classList.remove('grey');
    }
})();