html - Custom CSS Input Field issue -

why cursor start top right in example?

see when click inside field, it's top right when type moves centre. 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 not respond different line heights. use padding instead. */   line-height: 50px;   /* gives little gap between cursor , label */   margin-left: 2px; }  .input input, .input textarea, .input select {   z-index: 0;   padding: 6px;   margin: 0;   font: inherit;   line-height: 50px; } 

because of line-height. replace height:

input,  select,  textarea {    border: 2px solid $gray-lighter;    border-bottom: 1px solid $gray-lighter;    border-top: 1px solid $gray-lighter;    height: 50px;    /*replace 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 not respond different line heights. use padding instead. */    line-height: 50px;    /* gives little gap between cursor , 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>