JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<select class="empty" name="transmission">
    <option value="">Choose transmission type</option>
    <option value="auto">AUTOMATIC</option>
    <option value="manual">MANUAL</option>
    <option value="cvt">CVT</option>
    <option value="other">OTHER</option>
</select>

SCSS

select {
    option[value=""] {
        // set empty option color to light gray
        color: #999999;
    }
}
.empty,
.empty:hover,
.empty:focus,
.empty:active,
.empty:checked {
    // <select class="empty"><option value="">Select me</option></select>
    color: #999999;  // Set default color to light grey and override
    font-size: 14px;
    option {
        // Set default option color to a darker grey so it looks clickable
        color: #626466;
    }
    option[value=""] {
        // Set the color for the empty option to light grey (overriding default)
        color: #999999;
    }
    &:hover(:not(:checked)), &:focus(:not(:checked)) {
        // If it is not checked, don't darken on hover or focus (don't behave like a link)
        color: #999999;
    }
}

JavaScript

$('select').change(function() {
    if ($(this).val() == "") {
        $(this).addClass('empty');
    } else {
        $(this).removeClass('empty');
    }
});