8

HTML5 placeholders always appear slightly higher than the center of the input, so I'm trying to use CSS like ::-webkit-input-placeholder to push them down a bit. For some reason, I can't combine the selectors. Here's a Fiddle demonstrating this: http://jsfiddle.net/n7VV7/

I don't want to separate them because I use a CSS compression tool that automatically combines lines. Right now, I can manually separate them, but in the future, I will forget that I can't combine these lines.

Leo Jiang
  • 24,497
  • 49
  • 154
  • 284
  • A question should contain code for reproducing the issue, in the question itself. Moreover, it should state the desired goal, rather than name an attempted solution (like “combine selectors using commas”, which cannot be done, since commas are sepatators between selectors, not combiners). – Jukka K. Korpela Feb 17 '14 at 22:03

2 Answers2

11

You can't use commas to combine vendor-prefixed selectors because when a browser encounters a selector it does not understand, that line is "thrown out." This is why it's necessary to break up vendor prefixes for any selector, not just the :: pseudo-classes.

Here's a link to a CSS-Tricks article that mentions the problem:

Note that while we’re repeating code here, that’s necessary as you can’t comma-separate these type of selectors. Browsers will drop the entire selector if it doesn’t understand a part of it.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Marcatectura
  • 1,721
  • 5
  • 30
  • 49
1

It seems that it is impossible to combine them in one selector, because input-placeholder selectors are used only separately and it is described in a standard.

There is a similar question around: Why isn't it possible to combine vendor-specific pseudo-elements/classes into one rule set?

Community
  • 1
  • 1
Maksim Gladkov
  • 3,051
  • 1
  • 14
  • 16