Hide Arrows From mat-form-field in Angular Material

Question

I am using mat-form-field for telephone number input. Here is my base code for that.

<mat-form-field class="full-width">
  <input matInput type="number" placeholder="Telefonnummer für Rückruf" value="" [(ngModel)]="this.inputValues.phone">
</mat-form-field>

By the way, this component is showing Arrow/Spin buttons when I mouse hover on it.

Please let me know how I can customize this component so that it will not show Arrow/Spin buttons anymore.

Kind regards, Jie

Answer 1

The arrow/spinner occurs whenever the input type is number. It can removed using css/scss. This link provides example and also further information.

Try this css/scss code:

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

Answer 2

When you add the following CSS code to the style.css, it should be hidden.

/* 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;
}