I have the need to remove the numeric spinner only on a few selected inputs. If i place
/* Chrome, Safari, Edge, Opera */
input[matinput]::-webkit-outer-spin-button,
input[matinput]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[matinput][type=number] {
-moz-appearance: textfield;
}
in my styles.scss file the spinner is gone. What I need is a way to apply this only to a select chosen class so I can then apply class to the desired inputs. When i placed that code into a class in the local scss file it didn't work.
CodePudding user response:
You can achieve this in style.scss as below:
//style.scss
.remove-spinner {
/* Chrome, Safari, Edge, Opera */
input[matinput]::-webkit-outer-spin-button,
input[matinput]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[matinput][type=number] {
-moz-appearance: textfield;
}
}
//Use in html As
<div >
<mat-form-field appearance="outline" >
<mat-label>Search</mat-label>
<input type="number" matInput placeholder="Type here...">
</mat-form-field>
</div>
Please let me know if any help required