I’m using Angular Material 1.0.3 and <input> elements are correctly set but their values are visible if I click one to focus it. Once it’s not focused I can’t see the value.
The markup is as follows:
<md-input-container>
<label>Some label</label>
<input ng-model="model.someProperty">
</md-input-container>
After checking if it’s a CSS issue, I’ve found that the following CSS selector is turning color into transparent:
md-input-container:not(.md-input-has-value) input:not(:focus) {
color: transparent;
}
And obviously, it seems like the input doesn’t have the .md-input-has-value CSS class.
For now, I can’t figure out what’s going wrong.
Additional info
In my case, in opposite of Angular Material demos, controllers are on directives and UI Router states.
In fact, I can confirm that I’ve already copy-pasted the same markup in my index.html as direct child of <body> and then it works as expected.
Maybe it has some relation with this open issue: Compiling material directives on the fly: md-input-has-value attribute not set #3017.
<md-input-container> has the md-input-has-value CSS class
I’ve also checked that <md-input-container> has the md-input-has-value CSS class.
Answer
Angular material version – v1.0.1-master-edfe2ad
Just subscribed to help put anyone who is having this issue.
Go to the angular-material.css file and change this (for my is line 11,334)
md-input-container:not(.md-input-has-value) input:not(:focus),
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; }
to color black and viola fixed….