Placeholder Matching

This issue came up at work today. On the site we’re 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’t really have a placeholder equivalent. Rather they have options with no values. I call them dummy options. Options are, well, difficult to style.

Here’s 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’t like using JavaScript to solve these sorts of issues, but it’s 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’re doing.