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

问题描述

我使用 LOAD DATA INFILE 'test.csv' INTO TABLE test FIELDS TERMINATED BY ',' ENCLOSED BY '\"' IGnorE 1 LInes (node_name,parent) SET fid = 526,actv = 1; 输入电话号码。这是我的基本代码。

mat-form-field

顺便说一下，当我将鼠标悬停在该组件上时，它会显示箭头/旋转按钮。

请告诉我如何自定义此组件，使其不再显示箭头/旋转按钮。

亲切的问候， 杰

解决方法

当您将以下 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;
}

,

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

试试这个 css/scss 代码：

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

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