首页 > 其他 > 详细

input/textarea输入框光标高度兼容及其他事项

时间:2020-03-10 10:32:36      阅读:63      评论:0      收藏:0      [点我收藏+]

兼容方式

IE:不管该行有没有文字,光标高度与font-size大小一致

FF:该行没有文字时,光标大小与input的 height 大小一致;该行有文字时,光标大小与font-size大小一致

chrome:有2种情况,①设置了line-height  该行没有文字时,光标大小与input的 line-height 大小一致; 该行有文字时,光标大小从input顶部到文字底部

           ②没有设置line-height  光标大小与font-size一样

所以,input在使用的时候,最好不要设line-height, 可以设定一个较小的height, 然后用 padding 来撑开,这样基本上可以解决所有浏览器的问题
input{
    width: 220px;
    height: 10px;  //给一个基础的height即可
    padding: 15px 0px;  //设置padding撑开
    font-size: 12px;
    border:1px solid #dcdcdc;
    border-radius: 4px;
}

注意事项

1--在Ios端,Input框上部会有阴影,不美观
添加代码  -webkit-appearance: none;  即可

2--Input字数超出会隐藏超出部分;textarea则会以滚动条展示超出部分。
则若需填入的字数较多,建议使用textarea,如下

<textarea type="text" v-model="name" rows="2" placeholder="姓名" />

textarea{
    -webkit-appearance: none;  //去除ios端文本框上部阴影
    width:100%;
    padding: 10px;
    box-sizing: border-box;
    border:1px solid #dcdcdc;
    border-radius: 4px;
    font-size: 14px; 
    resize: none;  //取消文本域拖动属性
}

input/textarea输入框光标高度兼容及其他事项

原文:https://www.cnblogs.com/huihuihero/p/12453671.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!