如何独立设置输入元素的样式
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何独立设置输入元素的样式相关的知识，希望对你有一定的参考价值。
我正在设计一个特定的表单字段，但样式似乎不适用。我正在使用Angular 7。
这是我的表格：
<ul>
<li>
<mat-form-field *ngIf="number">
<input matInput disabled [value]="number">
</mat-form-field>
<mat-form-field *ngIf="name">
<input name="address" matInput disabled [value]="building.name">
</mat-form-field>
</li>
</ul>
我希望数字字段的宽度为200px，名称字段占用剩余的可用空间。
CSS文件：
.mat-form-field {
display: inline-block;
position: relative;
text-align: left;
width: 200px;
}
:host ::ng-deep input.mat-input-element[name=address] {
width: 100%;
}
这两个字段占用200px，名称字段值被夹在中间。它不会扩展到值的大小。
答案
尝试：
:host /deep/{
input.mat-input-element[name=address] {
width: 100%;
}
}
要么
::ng-deep{
input.mat-input-element[name=address] {
width: 100%;
}
}
另一答案
我建议您定义自己的自定义类并设置CSS并使用该类：
.extra-width {
// your CSS
width: 100%;
}
并在html中使用它：
<ul>
<li>
<mat-form-field class="extra-width" *ngIf="number">
<input matInput disabled [value]=" number ">
</mat-form-field>
<mat-form-field class="extra-width" *ngIf="name">
<input name="address" matInput disabled [value]="building.name ">
</mat-form-field>
</li>
</ul>
另一答案
使用以下CSS：
ul{
list-style: none;
margin: 0;
padding: 0;
}
/******** dont use upper CSS ************/
mat-form-field input {
width: 200px;
display: inline-block;
}
mat-form-field input[name=address] {
width: calc(100% - 220px);
display: inline-block;
}<ul>
<li>
<mat-form-field *ngIf="number">
<input matInput disabled [value]=" number ">
</mat-form-field>
<mat-form-field *ngIf="name">
<input name="address" matInput disabled [value]="building.name ">
</mat-form-field>
</li>
</ul>以上是关于如何独立设置输入元素的样式的主要内容，如果未能解决你的问题，请参考以下文章