Menu
I want to change the background color of my searchbar. It has the appearance="outline" and I like the design, but if I set a new color it goes over the borders and looks ugly. What can I do here?
My CSS:
::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
padding: 5%;
}
::ng-deep .mat-form-field-infix {
top: -3px;
}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
background-color: white;
}
My HTML:
<mat-form-field style="width:110%;" appearance="outline" >
<mat-icon matPrefix>search</mat-icon>
<input type="search" name="test" [(ngModel)]="searchText"
placeholder="Search" aria-label="Search" matInput>
</mat-form-field>
978
To add background color in HTML, use the CSS background-color property. Set it to the color name or code you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a table, heading, div, or span tag.
The <input type="color"> defines a color picker. The default value is #000000 (black). The value must be in seven-character hexadecimal notation. Tip: Always add the <label> tag for best accessibility practices!
To add background color to the form input, use the background-color property.
You can add border-radius to the div where you are changing the background.
I have tested border-radius: 5px and it looks good.
Code for you
I am assuming this background CSS is working for you. I just tried this with your selector.
::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
background-color: white;
border-radius: 5px;
}
Screenshot: http://prntscr.com/nanu75
128
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
