JSFiddle - React, Tailwind, and code Playground

by Lachlan Arthur

HTML

Re-selectable placeholder<br />
<select>
    <option value="" selected>Please select</option>
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
</select><br />
Hidden placeholder<br />
<select class="empty">
    <option value="" selected disabled>Please select</option>
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
</select>

CSS

select option {
	color: black;
}
select option:first-child {
	color: grey;
}
select.empty {
	color: grey;
}
/* Hidden placeholder */
select option[disabled]:first-child {
	display: none;
}

JavaScript

// JavaScript toggles the grey color of the control when the placeholder is selected
$("select:has(option[value=]:first-child)").on('change', function() {
  $(this).toggleClass("empty", $.inArray($(this).val(), ['', null]) >= 0);
}).trigger('change');