css - Forms: input + label as a placeholder -

i'm working on adaptive placeholders form. inspired http://blog.circleci.com/adaptive-placeholders use <label> , give style make normal placeholder.

like this:

input[type="text"][required] + label[placeholder]:before {                 content: attr(placeholder);                 display: inline-block;                 margin: 0 10px;                 padding: 0;                 color: #999999;                 white-space: nowrap; } 

normally target placeholder styling (eg. giving validation error class) this:

.error::-webkit-input-placeholder {                 color: #000;             } 

my first thought following set .error class, doesn't work:

.error::-webkit-input[type="text"][required] + label[placeholder]:before {                 color: #000;             } 

any suggestions on how can apply css class method used above?

jsfiddle: https://jsfiddle.net/34ye51t5/

thanks.

it looks you're running specificity issues. adding following css works, consider re-factoring code avoid these problems.

input[type="text"].error + label[data-placeholder]:before{   color: white; } 

first of placeholder not valid attrinbute label - it's inputs only. change data attribute, don't see point in this, might use label follows (alt not valid attribute

<label for="last_name">last name</label> 

you'll need adjust positioning etc. of label.

i consider adding class wrapper label/input combination better control , avoid said specificity issues. i've done quick example using bem naming conventions using sass preprocessor. isn't meant replicate behavior of code, should act starting point.

http://codepen.io/jaycrisp/pen/pgqbwd

you can add error class 'modifier' each element allow style these independently e.g. .fancy__input--error , not rely on using things + selector.