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

【问题标题】：How to style input elements independently如何独立设置输入元素的样式
【发布时间】：2019-04-25 20:26:32
【问题描述】：

我正在设置特定表单域的样式，但该样式似乎不适用。我正在使用 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>

我希望数字字段的宽度为 200 像素，名称字段占用剩余的可用空间。

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 像素，名称字段值介于两者之间。它不会扩展到值的大小。

【问题讨论】：

number 和 name 都从 mat-form-field 获取 200 像素，因此 address 宽度为 100% = 200 像素。如果您不需要支持旧浏览器，请使用 flex ;)
是的，我用过，效果很好

标签： javascript html css angular

【解决方案1】：

试试：

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

或

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：