在 Angular 材質中的 mat-form-field 中隱藏箭頭

Question

我正在使用mat-form-field輸入電話號碼。 這是我的基本代碼。

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

順便說一句，當我將 hover 放在它上面時，這個組件會顯示箭頭/旋轉按鈕。

請讓我知道如何自定義此組件，使其不再顯示箭頭/旋轉按鈕。

親切的問候，傑

Answer 1

只要輸入類型為number ，就會出現箭頭/微調器。 它可以使用 css/scss 刪除。 此鏈接提供示例和更多信息。

試試這個 css/scss 代碼：

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

當您將以下 CSS 代碼添加到style.css時，它應該被隱藏。

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