Issue
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;
}
Solution
From my understanding, both features seem to be in MatFormField.
- floatPlaceholder is deprecated, because now it's
[floatLabel]
for FloatLabelType ('never', 'always', 'auto'
), applied using input - You can change the color of the underline with input
[color]
, however you can only select colors from your theme ('primary', 'accent', 'warn'
). For more on how to setup the theme go to their website here,
<form class="search-form">
<mat-form-field class="example-full-width"
floatLabel="never" color="primary">
<input class="toolbar-search" type="text" matInput placeholder="search">
<mat-icon matSuffix style="font-size: 1.2em">search</mat-icon>
</mat-form-field>
</form>
Answered By - Iancovici
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.