文本字段游标问题在chrome [英] text field cursor issue in chrome

问题描述

我在我的表单部分使用以下css。

CSS

 code> .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; 
} 
  

它在所有浏览器中正常工作。但在Chrome中，光标显示在相同高度的输入标签。我发现解决方案，如果我删除 line-height 它显示为我想要它。但在IE中，值位于字段的顶部。我需要解决这个问题的解决方案。

请参阅我的小提琴。

删除 line-height 属性从我们的CSS类，我想它会帮助你

更新的小提琴： http：/ /jsfiddle.net/4Etyn/16/

 < div class =username> 
< input name =txtFullNameid =txtFullNametype =textclass =uservalue =UsernameonBlur =if（this.value ==''）this.value =用户名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; 
} 
  

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]

解决方案

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;
}

这篇关于文本字段游标问题在chrome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！