Matching input and dropdown placeholder styles (mostly).
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.
My solution has some issues, but works pretty well for the site we’re doing.