JSFiddle - React, Tailwind, and code Playground

by javad ebrahimi

HTML

<label for="labelCountry">Country</label>
    <select name="country" class="form-control" title="" id="country">
        <option value="none" selected>Select a Country</option>
        <option value="US">United States</option>
        <option value="CA">Canada</option>
        <option value="In">India</option>
        <option value="UK">United Kingdom</option>
        <option value="FR">France</option>
        <option value="CH">China</option>
        <option value="JA">Japan</option>
        <option value="GE">Germany</option>
        <option value="AU">Australia</option>
        <option value="RU">Russia</option>
        <option value="CA">Canada</option>
        <option value="PA">Pakistan</option>
        <option value="IT">Italy</option>
        <option value="SP">Spain</option>
        <option value="SK">South Korea</option>
        <option value="PH">Philippines</option>
        <option value="EN">England</option>
        <option value="EG">Egypt</option>
        <option value="SI">Singapore</option>
        <option value="GR">Greece</option>
        <option value="BR">Brazil</option>
    </select>

CSS

select.placeholder,
        select.placeholder option:first-child {
            color: #AFBAC7 !important;
        }

        select option {
            color: #333;
        }

JavaScript

$(function () {

        // first run
        $("select").each(function () {
            checkSelect($(this));
        });

        // after change
        $(document).on("change", "select", function () {
            checkSelect($(this));
        });

        function checkSelect($el) {
            $el.find("option:selected").index() == 0 ? $el.addClass("placeholder") : $el.removeClass("placeholder");
        }

    })