css 如果触摸元素，则编辑材料表单字段的边框颜色

brccelvz 于 2023-05-08 发布在其他

关注(0)|答案(1)|浏览(89)

如果元素在Angular 范围内被触摸/聚焦/激活，如何更改材料表单域的边框颜色。我试过change color by overriding材质的css类，也试过创建我自己的css类，但这两种方式都不影响元素。

/*my.component.html*/

 <mat-form-field class="matFormField">
    <mat-label>Name</mat-label>
    <input matInput [formControl]="name" required>
   </mat-form-field>

/*my.component.css*/    

.matFormField:focus {
  border-color: green !important;
  color: green;
}

css

来源：https://stackoverflow.com/questions/76177701/edit-border-color-of-material-form-field-if-element-is-touched

1条答案

按热度按时间

dldeef671#

如果我理解正确的话，你可以试着用“内观”。下面是一个应用你的代码的html示例。

.mat-form-field {
      border: 2px solid gray;
    }

    .mat-form-field:focus-within,
    .mat-form-field:active,
    .mat-form-field input:checked {
      border-color: green;
      color: green;
    }

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>

<body>
  <form>
    <mat-form-field class="matFormField">
      <mat-label>Name</mat-label>
      <input matInput [formControl]="name" required>
    </mat-form-field>
  </form>
</body>

</html>

如果我误解了，请让我知道，这样我就可以研究另一种方法。

赞(0）回复(0）举报 2023-05-08

我来回答

css 如果触摸元素，则编辑材料表单字段的边框颜色

1条答案

相关问题

热门标签

最新问答