0

I need some help with css on my login. I want the yellow background color to be transparent when a username is selected, or the two .svg pictures to come over the yellow background.

Two Links of what I mean:

enter image description here

enter image description here

I want the svgs of the username and password in the before picture to show in the after picture.

My 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>
reza.cse08
  • 5,938
  • 48
  • 39
Pete Howell
  • 41
  • 8
  • You'll need a script for that, is that ok? – Asons Jun 10 '16 at 18:00
  • It would be great if you could accept an answer, if any, that solve your question, or let us know what is missing, so we can find one that does – Asons Jun 19 '16 at 18:12

1 Answers1

0

Try this:

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