[英]Hide Arrows From mat-form-field in Angular Material
I am using mat-form-field
for telephone number input.我正在使用
mat-form-field
输入电话号码。 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.顺便说一句,当我将 hover 放在它上面时,这个组件会显示箭头/旋转按钮。
Please let me know how I can customize this component so that it will not show Arrow/Spin buttons anymore.请让我知道如何自定义此组件,使其不再显示箭头/旋转按钮。
Kind regards, Jie亲切的问候,杰
The arrow/spinner occurs whenever the input type is number
.只要输入类型为
number
,就会出现箭头/微调器。 It can removed using css/scss.它可以使用 css/scss 删除。 Thislink provides example and also further information.
此链接提供示例和更多信息。
Try this css/scss code:试试这个 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;
}
When you add the following CSS code to the style.css
, it should be hidden.当您将以下 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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.