Style form input login - html

Question

I want to write CSS and HTML to made this input forum from a psd file
I have few questions to ask:
First of all I cutted the background (without the other graphic elements). The header is simple to style. With the input text I found difficult: I would that when an user click over the rectangle, the text and the icon disappear.
this is my css code:
input{
background: url('input-bg.png') no-repeat;
border: none;
width: 303px;
height: 36px;
}
#username{
background: url('user-icon.png') no-repeat left;
}
#password{
background: url('password-icon.png') no-repeat left;
}
where input-bg.png is the following image:
<div id="form-login"><img id="member-icon" src="member-icon.png" />
<h2>Member login</h2>
<ul>
<li><input type="text" id="username" placeholder="User Name"/></li>
<li><input type="password" id="password" placeholder="Password" /></li>
</ul>
</div>
The problem is that the small icons are not showed because the background define of the input text overwite they. There is a simple way so solve this?
There is a simple way to reproduce also the glow effect on the right? i thought about put the effect with a value of the z-index highter than the other elements, but obviously there is a problem if you click over the button or the inputtext in the right of the form. Any suggestion?

Answer 1

I was thinking if its actually possible to make this form in CSS widthgradient, so I gave it a try.
Here's the result: Demo
Its not exactly like the form in picture, byt hey! I am no web designer.
And with some improvements from some CSS genius, you can make it look exactly like the one in picture.
Replace ? icon with the one you want.
HTML
<div class="container"> <!-- Unnecessary tag -->
<div class="form">
<div class="header">
Member Login
</div>
<div class="body">
<form>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<input id="rememberme" type="checkbox">
<label for="rememberme">Remember</label>
<input type="submit" value="Login Now">
</form>
</div>
</div>
</div>
CSS
body {
font-family: helvetica, sans-serif;
}
#font-face {
font-family: 'icons';
src: url('icons.ttf') format('truetype');
}
div, input {
box-sizing: border-box;
}
.container {
width: 500px;
height: 350px;
padding: 35px 0;
background: -webkit-linear-gradient(left, #C2DD9A, #F5FBF0 50%, #C2DD9A);
}
.form {
width: 365px; height: 274px;
margin: auto;
background: rgba(0,0,0,.23);
padding: 2px;
}
.header {
height: 44px;
line-height: 44px;
padding-left: 30px;
font-size: 20px;
background: url('http://i.imgur.com/s0O9hy0.png') 325px center no-repeat, -webkit-linear-gradient(top, rgb(253,253,253), rgb(198,203,199));
}
form {
margin: 0 31px;
}
input[type=text], input[type=password] {
display: block;
width: 100%;
height: 38px;
padding-left: 38px;
background: url('http://i.imgur.com/s0O9hy0.png') 10px center no-repeat, -webkit-linear-gradient(45deg, #404040 0%, #404040 60%, #535353 60%, #494949);
color: #AAA;
border: 1px solid black;
transition: box-shadow .3s;
}
input[type=text]:focus, input[type=password]:focus {
outline: 0;
box-shadow: inset 0 0 8px rgba(226,239,207,.7);
}
input[type=text] { margin-top: 36px; margin-bottom: 26px; }
input[type=password] { margin-bottom: 36px; margin-top: 26px; }
input[type=checkbox] {
-webkit-appearance: none;
width: 11px; height: 11px;
border-radius: 10px;
background: rgba(0,0,0,.5);
margin: 0 5px;
}
input[type=checkbox]:checked {
background: -webkit-radial-gradient(center center, circle, white 0%, white 30%, rgba(0,0,0,.5) 50%);
}
input[type=checkbox] + label {
color: white;
font-size: 15px;
padding-bottom: 3px;
}
input[type=submit] {
float: right;
width: 134px; height: 31px;
border: 1px solid #B7DA7C;
background: url('http://i.imgur.com/s0O9hy0.png') 15px center no-repeat, -webkit-linear-gradient(top, #99CC4B, #73A52C);
font-weight: bold;
color: white;
text-align: right;
padding-right: 22px;
}
input[type=submit]:active {
box-shadow: inset 0 -3 5px rgba(0,0,0,.5);
background: -webkit-linear-gradient(top, #649126, #7DB731);
}

Answer 2

what about using a before statement?
input#username:before{
content: url('user-icon.png');
}
http://www.w3schools.com/cssref/sel_before.asp

Answer 3

the easiest solution would be to add both icon and glow style into input background (different for each input) and then add padding-left to input. KISS rule ;)

Answer 4

Cut out the shade only and make it an absolute positioned div with right: 0; (assuming parent is the form box)
Since elements under the shade box won't be clickable (You will have an rectangle to show triangle), you will have to make invisible divs OVER shade box that will focus input boxes on click.
Order of z-index would be like this:
Input boxes
Shade box
Invisible divs to send focus to input boxes on click
That's what comes first to my mind.