Placeholder Matching

Matching input and dropdown placeholder styles (mostly).

This issue came up at work today. On the site we鈥檙e working on, placeholders are a light gray (as they usually are), and actual values in the inputs and dropdowns are supposed to be blue (I used red below for clarity). But dropdowns in HTML don鈥檛 really have a placeholder equivalent. Rather they have options with no values. I call them dummy options. Options are, well, difficult to style.

Here鈥檚 the issue we had:

See the Pen Placeholder Matching Problem by Andrew Moscardino (@amoscardino) on CodePen.

And my proposed solution:

See the Pen Placeholder Matching Solution by Andrew Moscardino (@amoscardino) on CodePen.

I normally don鈥檛 like using JavaScript to solve these sorts of issues, but it鈥檚 helpful here. We use the knowledge that our dropdown dummy option value is a false-y value in JavaScript to add a class if we are currently showing the placeholder value and update the color appropriately.

My solution has some issues, but works pretty well for the site we鈥檙e doing.