text field cursor issue in chrome
css, html, jquery
Solution
Remove `line-height` attribute from your css class, I think it will help you updated fiddle: http://jsfiddle.net/4Etyn/16/
<div class="username">
<input name="txtFullName" id="txtFullName" type="text" class="user" value="Username" onBlur="if(this.value=='') this.value='Username'" onFocus="if(this.value =='Username' ) this.value=''" />
</div>
.username input{
background-color: #FFFFFF;
border: 2px solid #DDDDDD;
border-radius:5px;
color: #9E9E9E;
height: 30px;
height: 22px\0/;
width: 330px;
padding:0px 10px 0px 10px;
padding:8px 10px 0px 10px\0/;
margin:15px 0px 0px 0px;
vertical-align:middle;
}
:root .username input{
height: 30px\9;
padding:0px 10px 0px 10px\9;
}
Problem
I am using following css in my form section. CSS ``` .username input{ background-color: #FFFFFF; border: 2px solid #DDDDDD; border-radius: 5px 5px 5px 5px; color: #9E9E9E; height: 30px; width: 330px; padding:0px 10px 0px 0px; padding-left:10px; margin:15px 0px 0px 0px; line-height:30px; } ``` It works fine in all browsers. But in the Chrome, cursor displays in the same height of input tag. I found the solution, if I remove the `line-height` it displays as I want it to. But in IE, the values are in top of the field. I need the solution for this issue. Please see the my fiddle. [It is not good in chrome]