CSS Eingabetyp = Text

Question

Ich brauche etwas Hilfe mit CSS auf meinem Login. Ich möchte die gelbe Hintergrundfarbe transparent sein, wenn ein Benutzername ausgewählt ist, oder die zwei .svg-Bilder über den gelben Hintergrund kommen.

zwei Links von dem, was ich meine:

Ich möchte die SVGs des Benutzernamen und Passwort in das Bild vor der nach dem Bild zu zeigen.

Mein Code

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

Try this:

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