在 Angular Material 中隐藏 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>

顺便说一句，当我将鼠标悬停在该组件上时，它会显示 Arrow/Spin 个按钮。

请告诉我如何自定义此组件，使其不再显示 Arrow/Spin 个按钮。

亲切的问候，杰

Answer 1

只要输入类型为 number，就会出现 arrow/spinner。它可以使用 css/scss 删除。 link 提供示例和更多信息。

试试这个 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;
}

在 Angular Material 中隐藏 mat-form-field 中的箭头

Hide Arrows From mat-form-field in Angular Material

html

css

angular

angular-material-6