我怎样才能改变mat-form-field高度appearance="outline"？
我需要减少 mat-form-field。
问问题
98477 次
14 回答
97
TLDR：调整周围容器的字体大小。
更长： 调整表单字段大小的功能内置在 Angular Material 中，因此除非您想更改字段中的相对比例，否则您无需为调整单个组件的大小而感到困惑（请参阅文档）。
调整字段大小的关键实际上只是调整周围容器中的字体大小。一旦你这样做了，其他一切都会随之扩展。例如
带容器字体大小：12px；
<div style="font-size: 12px">
<mat-form-field appearance="outline">
<mat-label>Your name</mat-label>
<input matInput placeholder="Jane Doe">
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Your email</mat-label>
<input matInput placeholder="you@youremail.com">
</mat-form-field>
</div>
结果形式：
带容器字体大小：18px；
<div style="font-size: 18px">
<mat-form-field...
</div>
结果形式：
注意
如果您对表单内的填充比例不满意，这不是您的解决方案。但是，这与您如何简单地调整表单大小是不同的问题。调整大小很简单，改变填充和边距比更麻烦！
于 2020-01-22T17:16:36.803 回答
76
在你原来的 stackblitz 中将这些添加到你的 CSS 中
::ng-deep .mat-form-field-flex > .mat-form-field-infix { padding: 0.4em 0px !important;}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-label { margin-top:-15px; }
::ng-deep label.ng-star-inserted { transform: translateY(-0.59375em) scale(.75) !important; }
更新：标签的过渡...
::ng-deep .mat-form-field-flex > .mat-form-field-infix { padding: 0.4em 0px !important;}
::ng-deep .mat-form-field-label-wrapper { top: -1.5em; }
::ng-deep .mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
transform: translateY(-1.1em) scale(.75);
width: 133.33333%;
}
于 2019-02-19T09:12:48.037 回答
24
使用 @AkberIqbal 的解决方案搞乱了我对 mat-form-fields 的样式，而不是outline. 此解决方案也不需要任何!important;. !important;你已经迷路了：D 。
因此，这是一种添加全局样式的安全方法：（似乎有点矫枉过正，但我宁愿保存也不要抱歉）
mat-form-field.mat-form-field.mat-form-field-appearance-outline > div.mat-form-field-wrapper > div.mat-form-field-flex > div.mat-form-field-infix { padding: 0.4em 0px }
mat-form-field.mat-form-field.mat-form-field-appearance-outline > div.mat-form-field-wrapper > div.mat-form-field-flex > div.mat-form-field-infix > span.mat-form-field-label-wrapper { top: -1.5em; }
.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
transform: translateY(-1.1em) scale(.75);
width: 133.33333%;
}
如您所见。我“寻找”每一堂课，直到找到大纲！我喜欢仅将轮廓样式应用于 outline-fields。
于 2019-05-23T16:16:55.327 回答
5
TL;DR 材料表单字段基于字段的font-size属性。
不要在 CSS/SCSS 中错误地调整材质高度、划桨等... 输入和选择等材质表单元素基于font-size. 此外，不建议使用内联样式，因此您可以简单地添加一些 CSS。`appearance 属性无关紧要。
::ng-deep .mat-form-field {
font-size: 12px; // example
}
于 2020-07-26T16:56:10.830 回答
4
如果有人想让 Akber Iqbal 的答案基于类（两种尺寸都可用）：
:host ::ng-deep {
.my-custom-component-small { // add my-custom-component-small class to your mat-form-field element
.mat-form-field-flex > .mat-form-field-infix { padding: 0.4em 0 !important;}
.mat-form-field-label-wrapper { top: -1.5em; }
&.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
transform: translateY(-1.1em) scale(.75);
width: 133.33333%;
}
}
}
希望 Angular 团队在未来的版本中增加对高密度 UI 的支持（高密度是材料设计规范的一部分）。
于 2019-11-26T18:45:31.173 回答
1
这是我使用的：
.small-input.mat-form-field-appearance-outline .mat-form-field-infix {
padding: .25em 0 .75em 0;
font-size: 14px;
}
.small-input.mat-form-field-appearance-outline .mat-form-field-infix .mat-select-arrow{margin-top: 10px;}
.small-input.mat-form-field-appearance-outline .mat-select-empty + .mat-form-field-label-wrapper .mat-form-field-label{margin-top: -0.75em;}
于 2020-06-07T18:37:57.987 回答
1
这是另一种方法：
/* Angular Material Overrides */
.mat-form-field-appearance-outline .mat-form-field-outline {
color: #ccc; /* Override outline color. */
}
.mat-form-field-appearance-outline .mat-form-field-infix {
padding: .65em 0; /* Original top/bottom value was 1em. */
}
.mat-input-element {
position: relative;
top: -1.2em; /* Adjust accordingly to keep placeholder/input text vertically centered. */
}
.mat-form-field-label-wrapper {
top: -1.2em; /* Adjust accordingly to keep <mat-label> text vertically centered. */
}
于 2020-06-09T19:56:15.593 回答
1
正如许多帖子的人所解释的那样，Material angular form-field 是基于字体大小的，所以对于所有想要定义自定义表单域的人来说，这里是我的代码来调整高度和宽度而不影响输入字体或图标切换大小。
- 在组件 css 中定义此代码并将它们作为一个类应用于 mat-form-field 标签。
.custom-form-field {
width: 200px;
font-size: 10px;
margin-top: 3px;
margin-bottom: -1.25em;
mat-datepicker-toggle {
font-size: 12px;
}
input.mat-input-element {
padding-bottom: 2px;
font-size: 12px;
color: $title-color;
}
}于 2021-06-02T07:50:58.220 回答
1
您可以对轮廓样式的填充值进行深度覆盖：
::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
padding: .5em;
}
对我来说这是一个很好的解决方案
于 2021-10-07T08:13:49.267 回答
1
如果您没有在“mat-select”中使用“mat-label”，那么下面的 css 将起作用
::ng-deep {
.mat-form-field-infix {
border: 0px !important;
}
.mat-form-field-appearance-outline .mat-select-arrow-wrapper {
transform: none !important;
}
}
前：
后：
于 2021-11-29T07:16:17.850 回答
0
这是我最近针对一个 32 像素高并允许圆角的字段的解决方案。
& .mat-form-field-wrapper {
height: 44.85px;
& .mat-form-field-flex {
height: 32px;
& .mat-form-field-outline {
$borderRadius: 25px;
height: 28px;
& .mat-form-field-outline-start {
border-radius: $borderRadius 0 0 $borderRadius;
width: 13px !important; // Override Material in-line style
}
& .mat-form-field-outline-end {
border-radius: 0 $borderRadius $borderRadius 0;
}
}
& .mat-form-field-infix {
left: 4px;
padding: 0;
top: -7px;
& .mat-form-field-label,
& .mat-input-element {
font-size: 12px;
}
& .mat-form-field-label-wrapper {
top: -1.04375em;
& .mat-form-field-label {
height: 16px;
}
}
}
}
}
于 2019-10-04T21:53:33.160 回答
0
这里提到了无法隐藏浮动标签的“问题”：https ://github.com/angular/components/issues/11845
提到的一个很好的解决方法是不要在您的 mat-form-field 中包含 mat-label 并将其添加到您的 css 中，无论是本地的还是全局的。您可能需要使用 ::ng-deep。
.mat-form-field:not(.mat-form-field-has-label) .mat-form-field-infix {
border-top-width: 0;
}
于 2021-05-17T08:52:24.343 回答
0
将更改应用到选择器.mat-form-field .mat-form-field-infix。在 Sass 中它将是：
.mat-form-field {
.mat-form-field-infix {
height: 16px;
}
}
于 2021-10-27T15:41:49.970 回答
0
这对我有用：
::ng-deep .mat-form-field-infix {
height: 25px;
font-size: 12px;
}
于 2022-02-24T10:06:15.373 回答