Material form css

.mat-form-field {
	display: inline-block;
	position: relative;
	text-align: left;
	width: 100%;
	margin-bottom: 10px;
	.mat-icon {
		color: $main-color !important;
	}
}
// mat-icon-stepper selected color change
::ng-deep .mat-step-header .mat-step-icon-selected,
.mat-step-header .mat-step-icon-state-done,
.mat-step-header .mat-step-icon-state-edit {
	background-color: $main-color !important;
}

//input outline color
::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
	color: $main-color !important;
	// opacity: 1!important;
}

//mat-input focused color
::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
	color: $main-color !important;
}

// mat-input error outline color
::ng-deep
	.mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid
	.mat-form-field-outline-thick {
	color: $error !important;
	opacity: 0.8 !important;
}

// mat-input cursor color
::ng-deep .mat-input-element {
	caret-color: $main-color !important;
}

// mat-input error cursor color
::ng-deep .mat-form-field-invalid .mat-input-element,
.mat-warn .mat-input-element {
	caret-color: $main-color !important;
}

// mat-label normal state style
::ng-deep .mat-form-field-label {
	color: $main-color !important;
	// color: $mainColor!important;
}

// mat-label focused style
::ng-deep .mat-form-field.mat-focused .mat-form-field-label {
	color: $main-color !important;
}

// mat-label error style
::ng-deep .mat-form-field.mat-form-field-invalid .mat-form-field-label {
	color: $error !important;
}

// error message
.mat-hint {
	color: $error !important;
	font-size: 14px;
}

Similar codes

-1 vote222 views2 answers
How to put different p elements next to each
CSS
0 vote209 views1 answer
Text size to fit button
CSS
0 vote204 views1 answer
What does it mean when we write width :100%?
CSS
0 vote238 views1 answer
Dropcap - :first-letter pseudo class not working as expected in firefox
CSS
-1 vote227 views1 answer
Css not full width
CSS
0 vote209 views2 answers
Create fish alias
CSS
0 vote217 views1 answer
Css broken image has top margin?
CSS
26 votes229 views3 answers
Css remove border input focus
CSS
3 votes203 views4 answers
Css keep image ratio
CSS
1 vote217 views2 answers
Scss exceeded maximum budget. Budget 7.00 kB was not met by 841 bytes with a total of 7.82 kB.
CSS