Select pseudo placeholder
HTML
<select class="has-placeholder">
<option value="">Choose...</option>
<option value="1">Something</option>
<option value="2">Something else</option>
<option value="3">Another choice</option>
</select>
SCSS
select {
option { color: #333; }
&.has-placeholder{
&.has-placeholder-selected,
option:first-child[value=""] { color: #999; }
}
}
JavaScript
$("select.has-placeholder").change(function() {
$(this).toggleClass("has-placeholder-selected", $(this).val() === "");
});
$("select.has-placeholder").change();