Как стилизовать элементы ввода самостоятельно

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>

Я хочу, чтобы числовое поле имело ширину 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 пикселей, а значение поля имени засекается между ними.Он не расширяется до размера значения.

Answer 1

Я бы предложил определить свой собственный класс, установить 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 2

Используйте ниже 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>

Answer 3

Попробуйте:

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

или

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