CSS Тип ввода = текст

Question

Мне нужна помощь с css в моем логине. Я хочу, чтобы желтый цвет фона был прозрачным, когда выбрано имя пользователя, или два изображения .svg, которые попадают на желтый фон.

Две ссылки на то, что я имею в виду:

Я хочу SVGs от имени пользователя и пароля в перед изображением, чтобы показать в картине после.

Мой код

CSS:

.user{ 
background-image: url("css/user.svg"); 
background-size: 18px 18px; 
background-position: 11px 8px; 
background-repeat: no-repeat; 
} 
.pass{ 
background-image: url("css/pass.svg"); 
background-size: 18px 18px; 
background-position: 11px 8px; 
background-repeat: no-repeat; 
} 

HTML:

<form> 
<input type="text" placeholder="username" class="user" name="username" /> 
<input type="password" placeholder="password" class="pass" name="password" /> 
<input type="submit" value="LOGIN" /> 
</form> 

Answer 1

Попробуйте это:

.user:focus { 
     //code here for you images and bg 
} 
    // and 
.pass:focus{ 
    //same 
}