Custom CSS Input Field issue - html

Question

Why does my cursor start top right in this example?
See when I click inside the field, it's top right then when I type it moves to the centre. Any ideas why?
http://jsfiddle.net/2Ltm5adw/
HTML:
<label class="input">
<span>Email address</span>
<input type="text" />
</label>
CSS:
input, select, textarea {
line-height:50px;
width:100%;
padding-left:20px;
display: block;
}
.input span {
position: absolute;
z-index: 1;
cursor: text;
pointer-events: none;
color: #999;
/* Input padding + input border */
padding: 7px;
/* Firefox does not respond well to different line heights. Use padding instead. */
line-height: 50px;
/* This gives a little gap between the cursor and the label */
margin-left: 2px;
}
.input input, .input textarea, .input select {
z-index: 0;
padding: 6px;
margin: 0;
font: inherit;
line-height: 50px;
}

Answer 1

Because of the line-height. Replace it with height:
input,
select,
textarea {
border: 2px solid $gray-lighter;
border-bottom: 1px solid $gray-lighter;
border-top: 1px solid $gray-lighter;
height: 50px;
/*replace with height*/
width: 100%;
padding-left: 20px;
background: $white;
display: block;
}
.input span {
position: absolute;
z-index: 1;
cursor: text;
pointer-events: none;
color: #999;
/* Input padding + input border */
padding: 7px;
/* Firefox does not respond well to different line heights. Use padding instead. */
line-height: 50px;
/* This gives a little gap between the cursor and the label */
margin-left: 2px;
}
.input input,
.input textarea,
.input select {
z-index: 0;
padding: 6px;
margin: 0;
font: inherit;
height: 50px;
/*replace height*/
}
<label class="input">
<span>Email address</span>
<input type="text" />
</label>

Answer 2

Demo
It's because of line-height. try height instead line-height.It works fine
.input input, .input textarea, .input select {
z-index: 0;
padding: 6px;
margin: 0;
font: inherit;
height: 50px;
}

Answer 3

Just remove line-height from inputs and replace them with padding: 20px 7px;
.input span {
position: absolute;
z-index: 1;
cursor: text;
pointer-events: none;
color: #999;
/* Input padding + input border */
padding: 7px;
/* Firefox does not respond well to different line heights. Use padding instead. */
line-height: 50px;
/* This gives a little gap between the cursor and the label */
margin-left: 2px;
}
.input input,
.input textarea,
.input select {
z-index: 0;
padding: 6px;
margin: 0;
font: inherit;
padding: 20px 7px;
}
<label class="input">
<span>Email address</span>
<input type="text" />
</label>

Answer 4

Whats wrong with this ? Saves mucking around
<label for="emailID">Email Address : </label>
<input type="email" id="emailID" placeholder="Your Email Address"/>
And stylable.
#emailID {width:300px;background-color:green;color:white;border-radius:5px;}
<label for="emailID">Email Address : </label>
<input type="email" id="emailID" placeholder="Your Email Address"/>

Answer 5

Here is your updated JSFiddle Link, Check out your issue has been solved or not !!
Changes Made:
.input span {
padding: 20px;
line-height: 25px;
}
.input input, .input textarea, .input select {
padding: 20px;
height: 25px;
}