I had a difficult, hair-twirling time (hair-twirling being a prime indicator of internalized consternation) attempting to control the vertical positioning of the placeholder attribute of a search input field, located here, in Safari. Here’s a gif to illustrate the issue:
The placeholder attribute (gray text) differed in line-height from the value attribute (black text), so as I began to type in the field, it felt like the text was shifting down two pixels, and it was vexing. I tried redeclaring the line-height of the input, but, I assume to due wonkiness with my CSS in conjunction with Safari’s user agent stylesheet, the texts still didn’t align satisfactorily.
I subsequently resorted to fiddling with padding, vertical-align, and position to no avail. Then, huzzah:
line-height: revert; is a valid property–value combo I’d never before encountered and that appears undocumented. (I only came across it cycling through the populated values for line-height in Safari’s web inspector.) In Chrome, the placeholder assumes line-height without issue. Goofy.
