0

My mind is blown. Check this out, I've got the following CSS:

.login-form .form-control:focus::-webkit-input-placeholder,
.login-form .form-control:focus:-moz-placeholder, 
.login-form .form-control:focus::-moz-placeholder, 
.login-form .form-control:focus:-ms-input-placeholder, 
.login-form .form-control:focus::-ms-input-placeholder {
  color: blue;
}

It fails to make the focused input's placeholder text blue (in Chrome). But if I cut this down to just this:

.login-form .form-control:focus::-webkit-input-placeholder {
  color: blue;
}

then it works fine. I don't even understand what the heck's going on here. The other selectors are comma-separated and shouldn't have any effect on the Webkit-specific one. What's going on here?

EDIT: This has nothing to do with invalid (or cutting edge) CSS, as even the following breaks:

.login-form .form-control:focus::-webkit-input-placeholder,
.login-form .form-control:focus::-moz-placeholder {
  color: blue;
}
ffxsam
  • 26,428
  • 32
  • 94
  • 144
  • FYI, `::-ms-input-placeholder` (the pseudo-element) does not exist. There is just the pseudo-class. – BoltClock Sep 06 '15 at 02:24
  • It does exist. `::-ms-input-placeholder` is for Edge. [See this](http://caniuse.com/#feat=css-placeholder). – ffxsam Sep 06 '15 at 02:26
  • And even if I drop that one, it still doesn't work. If I only have Webkit's and Firefox's, it fails. – ffxsam Sep 06 '15 at 02:27
  • @BoltClock See edit above. Even with perfectly valid CSS where you would expect it to process the entire declaration, it doesn't. – ffxsam Sep 06 '15 at 02:30
  • OK, my bad. It seems to be undocumented though. Probably with good reason. As for validity - what you have there is *still* invalid CSS as far as browsers are concerned, as I point out in my answer to the duplicate. – BoltClock Sep 06 '15 at 02:32
  • 1
    You have -webkit- and -moz- in the same ruleset. I know WebKit used to harmlessly ignore other vendor prefixes to make authors' lives easier, but I don't know if it does that anymore. Firefox certainly doesn't consider the selector valid because it doesn't recognize the -webkit- prefix. – BoltClock Sep 06 '15 at 02:34
  • Ahh! Strange. Ok, well, good thing I'm using SCSS. I just made a mixin to declare each of these separately. Thanks for pointing me in the right direction! – ffxsam Sep 06 '15 at 02:35
  • And I upvoted your answer on the other question you linked to. – ffxsam Sep 06 '15 at 02:35
  • Haha I noticed, thanks :) – BoltClock Sep 06 '15 at 02:36

0 Answers0