Question

我正在为特定的表单字段设置样式，但是该样式似乎并不适用。我正在使用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%;
}

这两个字段占用200像素，而名称字段值则介于两者之间。它不会扩展到值的大小。

Answer 1

尝试：

:host /deep/{
  input.mat-input-element[name=address] {
   width: 100%;
  }
}

或

::ng-deep{
   input.mat-input-element[name=address] {
   width: 100%;
  }
}

Answer 2

我建议定义自己的自定义类并设置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>

Answer 3

在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>

如何独立设置输入元素的样式

3 个答案: