JSFiddle - React, Tailwind, and code Playground

by guest271314

HTML

<select>
    <option value="">Empty Option</option>
    <option value="1">Option 1</option>
    <option value="1">Option 2</option>
    <option value="1">Option 3</option>
    <option value="1">Option 4</option>
</select>

CSS

select {
    width: 150px;
    font-size: 12px;
    padding: 5px;
    height: 30px;
}

select.empty {
	color: #959595;
	font-family: Monospace !important;
}

select.empty:focus, option:not(:first-child) {
	color: #282525;
	font-family: Impact !important;
}

select:focus option:first-child {
	color: #BDBDBD;
	font-family: Monospace !important;
}

JavaScript

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