如何在角度6的输入中更改Mat-icon的颜色？

Question

这是我的html文件：

      <div class="input-field">
    <div>
      <input type="text" id="name" required email/>
      <label for="name">Email:
        <mat-icon svgIcon="mail" class="change-color"></mat-icon>
      </label>
    </div>
    <div>
      <input type="text" id="psw" required />
      <label for="psw">Password:</label>
    </div>
  </div>

这是我的css文件：

.input-field {
position: absolute;
width: 302px;
height: 44px;
line-height: 20px;
}

label {
position: relative;
top: -25px;
left: 0;
width: 100%;
color: rgba(158, 158, 158, 1.0);
transition: 0.2s all;
cursor: text;
font-size: 14px;
font-weight: 400;
}

input {
width: 100%;
border: 0;
outline: 0;
padding: 0.5rem 0;
border-bottom: 2px solid #d3d3d3;
box-shadow: none;
color: #111;
}

.change-color {
color: #787878;
height: 12px;
width: 12px;
float: right;
}


input:invalid {
outline: 0;
}

input:focus,
input:valid {
border-color: #00dd22;
}

input:focus ~ label,
input:valid ~ label {
font-size: 14px;
top: -45px;
color: #00dd22;
mat-icon.change-color{
color: #00dd22;
height: 12px;
width: 12px;
float: right;
 }
}

现在，我想在单击输入时更改图标的颜色，但是图标不会移动。 我通过添加CSS来解决此问题，如下所示：

input:focus ~ label,
input:valid ~ label {
font-size: 14px;
top: -45px;
color: #00dd22;
mat-icon.change-color{
color: #00dd22;
height: 12px;
width: 12px;
float: right;
 }
}

但仍然，图标会随着颜色的变化而移动，我在这里做了示例，但在这里是此css：

 input:focus ~ label,
input:valid ~ label {
font-size: 14px;
top: -45px;
color: #00dd22;
mat-icon.change-color{
color: #00dd22;
height: 12px;
width: 12px;
float: right;
 }
}

但是此代码在这里不起作用☝☝： https ://stackblitz.com/edit/angular-dgrpcx ? file = src%2Fapp%2Fapp.component.html，因此我创建了另一种方式的示例

我该如何解决？ 我用角6。

这是我想要的图片http://prntscr.com/m12bb0

Answer 1

在您的CSS中，添加：

input:focus ~ label.ee .change-color {
  color: #00dd22;
}

这是一个工作示例 。