input: date/time type labels and "placeholders" conflict

[ilanbiala]

The input "placeholders" are created by the browser (Chrome in this particular picture), not me.

[gustavohenke]

Possible fix:
https://groups.google.com/d/msg/ngmaterial/B6Z9QBDMw-c/4uhS-j7V1c0J

[marcysutton]

That does seem like a decent solution, since we'd want to keep the native keyboards for mobile but change the styling. From @gustavohenke's awesome suggestion on the forum:

md-input-container:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-ampm-field,
md-input-container:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-day-field,
md-input-container:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-hour-field,
md-input-container:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-millisecond-field,
md-input-container:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-minute-field,
md-input-container:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-month-field,
md-input-container:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-second-field,
md-input-container:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-week-field,
md-input-container:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-year-field,
md-input-container:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-text {
  color: transparent;
}

My question (without stopping what I'm doing to go try it out): do the selectors have to be that verbose? Should the color be transparent only when it's not focused or has a value?

[gustavohenke]

Hmmm... well, I don't know what I was thinking when writing that huge selector. Looks pretty obvious now! Probably, some question in StackOverflow bit me.

This one will work:

md-input-container:not( .md-input-has-value ) input:not( :focus ) {
     color: transparent;
}

Demo: http://plnkr.co/edit/JAWVTQQKzgXtLH9N12tQ?p=preview

[marcysutton]

I guess that does work! I thought we'd want to target the -webkit pseudo selectors.

[Splaktar]

@gustavohenke This selector doesn't work on Firefox. #2162

The -webkit pseudo selectors do appear to work properly and avoid breaking Firefox.

[Splaktar]

#3582 seems to fix this and resolve the Firefox regression.