I have a mat-form-field with input that I am wanting to add a custom style to, however I cannot find any documentation regarding this on the official Angular Material website.
My eventual goal is to:
- Change the underline colour after the input box is selected
- Remove the floating label (if possible - I know this was a feature but now deprecated).
I'm not the most adept with Angular just yet, but if things need changing in JS, then I can always give it my best shot.
I just need a little guidance.
Current Code:
<form class="search-form">
<mat-form-field class="example-full-width">
<input class="toolbar-search" type="text" matInput>
<mat-placeholder>Search</mat-placeholder>
<mat-icon matSuffix style="font-size: 1.2em">search</mat-icon>
</mat-form-field>
</form>
Current CSS:
// Change text colour when inputting text
.toolbar-search, mat-placeholder {
color: white;
}
// Changes the underline and placeholder colour before input is selected
/deep/ .mat-input-underline {
background-color: white;
}