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;
}

Here is a working example。

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

1 个答案: