I am attempting to customize a specific mat input element in my application using an external CSS file.
For instance, I have imported textfield.css and style.css files for this purpose.
Let me provide some code snippets below:
<mat-form-field>
<input class="txtfieldwithBorderGreen" formControlName="password" matInput type="Password" placeholder="password">
</mat-form-field>Here is the HTML file with the applied class
"txtfieldwithBorderGreen"I aim to configure the properties of any text field by simply applying this class wherever necessary.
Thus, I created a textfield.css file and included it in the style.css file as shown below:
.mat-form-field-appearance-legacy .mat-form-field-label {
background-color: green !important;
}The textfield.css file is imported into styles.css file as follows:
@import 'globalcss/textfield.css';
html, body { height: 100%; padding: 0; margin: 0; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }This styling will be implemented on all matInputs, but I specifically want to target one input. Hence, I added the following code:
.txtfieldwithBorderGreen .mat-form-field-appearance-legacy .mat-form-field-label {
background-color: green !important;
}However, it seems that the above code is not functioning properly. When I remove .txtfieldwithBorderGreen, the styling works fine across all mat inputs. Any insights on where I may be making a mistake or if any adjustments are needed?
P.S. My objective is to create predefined CSS classes like
textfield-smaller textfield-big, etc., and easily assign the class name to the mat inputs without needing to modify the respective CSS files each time.
Any assistance would be greatly appreciated!