как изменить цвет mat-icon на входе в angular 6? - PullRequest
Новая
       24

как изменить цвет mat-icon на входе в angular 6?

0 голосов
/ 29 декабря 2018

это мой 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

1 Ответ

0 голосов
/ 29 декабря 2018

Добавьте в свой CSS: 

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

Вот рабочий пример .

...