How can I change the background color, font color, and border color of this material-ui autocomplete textfield (combobox)? I would like to use css. this is what I have tried so far.
<Autocomplete
disablePortal
id="combo-box-demo"
options={clients}
className="test"
renderInput={(params) => <TextField {...params} label="Movie" />}
/>
css class
.test {
.MuiAutocomplete-listbox {
color: red;
}
}
Since you would like to use css, you can change colors like this:
.test fieldset {
border-color: red;
}
.test .MuiInputBase-root:hover fieldset {
border-color: blue;
}
.test input {
color: red;
}
.test label {
color: red;
}
.test {
background-color: yellow;
}
You can take a look at this sandbox for a live working example.
I need to apply a custom style to the disabled the antd range picker.
I have added className to the component but the style isn't changing.
<RangePicker
className="my-range"
allowClear={false}
bordered={true}
format="HH:mm"
style={{ width: "100%" }}
/>
Styles Css: (need to change color of the text in the box)
.ant-picker-disabled.building-ophrs-range {
background-color: #ffffff;
.ant-picker-input.ant-picker-input-active {
color: #224cc0;
}
}
Codesandbox : https://codesandbox.io/s/basic-antd-4-20-7-forked-g5ee2t?file=/demo.js
try to write
.ant-picker-disabled.my-range {
background-color: #008000 !important;
}
Try this:
.ant-picker.my-range.ant-picker-disabled {
background-color: #008000;
}
I have implemented a basic native select from Angular Material. In this I want to change the caret color of select to green.
HTML :
<mat-form-field >
<select matNativeControl >
<option> A </option>
<option> B </option>
<option> C </option>
</select>
</mat-form-field>
CSS :
.mat-form-field.mat-focused {
.mat-form-field-ripple {
display: none;
}
.mat-form-field-required-marker {
color: green;
}
}
.mat-form-field {
.mat-form-field-underline {
background-color: green;
}
}
.mat-form-field.mat-form-field-invalid {
.mat-form-field-ripple {
background-color: red;
}
}
Cannot figure out how to change the caret color to green in native select element.
Try this
Default state
.mat-form-field-type-mat-native-select .mat-form-field-infix::after {
color: green;
}
Use !important for focus color as well
Or use this
.mat-form-field-type-mat-native-select.mat-focused:not(.mat-form-field-invalid) .mat-form-field-infix::after{
color: green;
}
Consider this switch:
<Switch class="switch" formControlName="answer"></Switch>
If I do this it only works when you haven't activated the switch yet, after that the background-color will always be the same even when the switch is not active:
.switch[checked=true] {
background-color: #FE4A49;
color: #FE4A49;
}
And if I do this:
.switch {
background-color: #FE4A49;
color: #FE4A49;
}
Then the background will always be the same regardless of the state.
What's the correct way of styling a switch when using it with angular's model bindings?
i'm styling an App and this is i'd do.
CSS:
Switch#userStatus[checked=true]{
color:#ff0048 ;
background-color: white;
transform: scale(1.25, 1.25); // This is for change the size when checked
transform: translate(-5,0); // This is for stay the position after scale it
}
Switch#userStatus[checked=false]{
color: gray;
background-color: gray;
}
And this is my XML:
`<Switch id="userStatus" checked="false" />`
I hope this helps!
I had an issue with switch
background-color
and it was not working as expected. Changing the background-color was changing the whole switch (the gray part). So I had to change only the color property:
Switch[checked=true] {
color: #f68533;
}
.switch-notchecked {
background-color: #FE4A49;
color: yellow;
}
.switch-checked {
background-color: blue;
color: green;
}
In your template
<Switch #sw checked="false" (checkedChange)="switchChanged(sw.checked)" [class]="isChecked?'switch-checked':'switch-notchecked'"></Switch>
In your component
isChecked:boolean;
switchChanged(checked) {
this.isChecked = checked;
}
How do I change md-input-container placeholder color using css in Angular Material? As screenshot below I have phone no. and password textfield. Phone no. textfield has Phone No. and password has Password placeholder name.
in the last version of angular you can remove the placeholder in the input and add a mat-placeholder in the mat-form-field and custom the css with a class
html :
<mat-form-field>
<input matInput type="text">
<mat-placeholder class="placeholder">Search</mat-placeholder>
</mat-form-field>
css:
.mat-focused .placeholder {
color: #00D318;
}
Placeholder is depicted as a <label> in Angular Material. So you actually need to style the label not the placeholder.
As soon as you click (focus) on the input this <label> which is looking as a placeholder slides up and converted into a form <label>.
So you just need to apply this CSS:
/* When the input is not focused */
md-input-container label {
color: red;
}
/* When the input is focused */
md-input-container.md-input-focused label {
color: blue;
}
Have a look at this Plunkr Demo.
In Angular 4+
First you will need to turn ViewEncapsulation off to style Material Elements. Be warned this is subverting the Angular emulated-shadow DOM default and you should proceed with caution (https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html).
In dummy.component.ts:
#Component({
...,
encapsulation: ViewEncapsulation.None,
})
Then give your < mat-form-field > element a unique class in dummy.component.html:
<mat-form-field class="dummy-input-field" floatPlaceholder="always">
<input placeholder="Dummy"/>
</mat-form-field>
Finally in dummy.component.css apply the styling:
.dummy-input-field .mat-input-placeholder {
color: red;
}
Similarly, if you'd like to dynamically change color if the field is focused:
.dummy-input-field.mat-focused .mat-input-placeholder {
color: red;
}
.container {
.mat-form-field-outline,
.mat-form-field-empty.mat-form-field-label,
.mat-form-field-label,
.mat-form-field-underline,
.mat-input-element,
::placeholder {
color: $white !important;
}
}
The code above gives me the results below. I am overriding the form-field outline, label-empty, label, underline, input element, placeholder text.
I'm using Angular 8.2.2 and Angular Material 8.2.2
For the newer versions of material which have a mat prefix instead of md prefix, you can do this in 2 ways:
way 1: using view encapsulation set to none and then writing the styles in the components css file, like #user2245995 pointed out in the answer above.
Although this is the way angular suggests, please be advised that the styles you write here will propagate to all the child/parent components and effect other elements there.
way 2: We can use the shadow piercing descendant combinators i.e. /deep/ or ::ng-deep or >>> Below is an example
/deep/ label.mat-input-placeholder {
color: #fff; // choose the color you want
}
Although this method is specified in the angular docs as of now, they have mentioned that this method will soon be deprecated.
read more: https://angular.io/guide/component-styles#!#-deep-
I tried to be as deterministic as possible for the color of a mat input and I dare to share the result here, hoping it will help some others (the placeholder color customization need is handled, as asked in the question):
CSS custom properties used
Note: The colors are considered different when the focus is here or not, that is why we have 2 blocs in the following:
--clear-button-color: lightblue;
--asterisk-color: lightgreen;
--label-color: springgreen;
--underline-color: blue;
--input-color: lightgray;
--clear-button-focused-color: blue;
--asterisk-focused-color: green;
--label-focused-color: pink;
--underline-focused-color: yellow;
--input-focused-color: gray;
--placeholder-focused-color: magenta;
--caret-focused-color: blue;
SCSS styling
.mat-form-field {
&.mat-focused {
> .mat-form-field-wrapper {
> .mat-form-field-flex {
> .mat-form-field-infix {
> .mat-input-element {
color: var(--input-focused-color);
caret-color: var(--caret-focused-color);
&::placeholder {
color: var(--placeholder-focused-color);
}
}
> .mat-form-field-label-wrapper {
> .mat-form-field-label {
> mat-label {
color: var(--label-focused-color);
}
> .mat-placeholder-required {
color: var(--asterisk-focused-color);
}
}
}
}
> .mat-form-field-suffix {
> .mat-focus-indicator {
> .mat-button-wrapper {
> .mat-icon {
color: var(--clear-button-focused-color);
}
}
}
}
}
> .mat-form-field-underline {
> .mat-form-field-ripple {
background-color: var(--underline-focused-color);
}
background-color: var(--underline-focused-color);
}
}
}
> .mat-form-field-wrapper {
> .mat-form-field-flex {
> .mat-form-field-infix {
> .mat-input-element {
color: var(--input-color);
&::placeholder {
color: var(--placeholder-color);
}
}
> .mat-form-field-label-wrapper {
> .mat-form-field-label {
> mat-label {
color: var(--label-color);
}
> .mat-placeholder-required {
color: var(--asterisk-color);
}
}
}
}
> .mat-form-field-suffix {
> .mat-focus-indicator {
> .mat-button-wrapper {
> .mat-icon {
color: var(--clear-button-color);
}
}
}
}
}
> .mat-form-field-underline {
> .mat-form-field-ripple {
background-color: var(--underline-color);
}
background-color: var(--underline-color);
}
}
}
.mat-input-element::-webkit-input-placeholder {
color: red;
}
this is if you use a structure similar with this one:
<input
matInput
[placeholder]="placeholder"
/>