How can i remove the number spinner in Angular on selected inputs

Question

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.

Answer 1

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 class="remove-spinner">
  <mat-form-field appearance="outline" class=" no-space-field">
     <mat-label>Search</mat-label>
     <input type="number" matInput placeholder="Type here..."> 
  </mat-form-field>
</div>

Please let me know if any help required