md-input changing un-focus text and under-line color

[bkarv]

Hi,
Very excited with the progress being made, excellent work and thank you.

I have simple question, is it possible to change md-input text color and line color when it is un-focused? For example I am using md-input on a dark background hence would like a white font and underline.

[JanStureNielsen]

@bkarv -- the GitHub issue tracker is for project bugs and project feature requests as noted in CONTRIBUTING.md. For better support, consider creating a question on StackOverflow with all the details.

[vinagreti]

If you look at md-input theme and component scss files you will find out how they implement it. It is easy to customize for your needs.
I think you should look at theming.md file. Theming allow you to customize your components based in a theme.
I've made a PR #1385 that explain a little more about theming custom components. I do not know if it is the better way of doing this but is the way I've found.

[bkarv]

Thanks. I tried stackoverflow and no luck as it is quite new. I've tried using css selectors eg #test input:first-child {color:white;} or '#test input{color:white;}' and no luck still sticks to default black. (Note id test is assigned to md-input) Just want to know if it is actually possible therefore I can look at alternative solutions? Assuming the above worked in Angular Material 1 should I put this as a new issue?

[MarouaneSH]

To change label color and underline :
mat-focused .mat-form-field-label{ color: #ee6e73; } .mat-focused .mat-form-field-underline .mat-form-field-ripple{ background: #ee6e73; }

[JaimeBulaHNP]

To change label color and underline :
.mat-focused .mat-form-field-label{ color: #ee6e73; } .mat-focused .mat-form-field-underline .mat-form-field-ripple{ background: #ee6e73; }

This Works, thaks MarouaneSH

[ashaikh-wal]

.mat-form-field-appearance-legacy {
.mat-form-field-underline {
height: 0 !important;
}
.mat-form-field-wrapper{
padding-bottom: 0 !important;
}
.mat-form-field-infix{
// padding: 0 !important;
border-top: 0 !important;
}
}

.mat-focused {
.mat-form-field-label
{
color: #78818b !important;
}
.mat-form-field-underline {
.mat-form-field-ripple {
display: none !important;
}
}
}

[MarouaneSH]

@JaimeBulaHNP you welcome 👌

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}