Incorrect text-field placeholder priority

[nunofgs]

Consider the following CSS:

label {
   color: red;
}

text-field placeholder {
   color: blue;
}

My intended result is for the textfield's placeholder to be blue, but in fact, it will be red. Since the selector 'text-field placeholder' is more specific, shouldn't it win against the 'label' selector?

[pcolton]

text-field placeholder is styling a property of text-field, and label styles any labels it can find, including children of text-field. These two aren't 'competing' to win, they are completely independant and it's undetermined who will get styled first. In summary:

• label and placeholder are two different elements as far as CSS is concerned
• If textfield gets styled before label, placeholder wins and vice versa

As a general rule of thumb, styling things like label probably isn't a good idea as it will style ALL labels, across the entire app, and that can lead to undetermined styling.

[buelsenfrucht]

Long time ago, but @nunofgs issue is right. when I set a basic label-style, I can't change placeholder styling in any way. Cost me a whole day to find out.

But I guess this project here is dead anyways?!

[anton-matosov]

yes. this project is dead. I am trying to bring it back to life as part of StylingKit

Suggested solution is the best practice for pixate. As label is basic construction block

As a general rule of thumb, styling things like label probably isn't a good idea as it will style ALL labels, across the entire app, and that can lead to undetermined styling.

I am using .p style for all the labels and simply assigned it to all of them That makes styling much cleaner. I actually don't use element level selectors, I use only classes

[cabezaspam]

Here in 2018, I solved this creating a css like this: label { color: green; } /* Styles all labels */ text-field label { color: red; } /* Styles all text-field's placeholders */ text-field { color: blue; } /* Styles all text-field's written text (attributed-text) */ Ps: For some reason the 'text-field attributed-text' crashes my application.