ios下 input输入框的蓝色光标 未居中且高度过高

博客讲述了调试安卓手机时,input输入框光标不明显问题。原因是为保证标题和输入框文字垂直居中,设置height和line-height使光标高度异常。设计稿要求标题与输入框同行且输入框靠右,后改变思路让整行靠右、标题浮动,解决了问题。

调试时用的是安卓手机,由于安卓input输入框的光标没有ios那么明显,所以一直没有发现这个问题。
产生原因 : 为了保证标题 和 input 框中的文字垂直居中,使用了heigh和line-height,导致整个光标高度变成了输入框的高度。如果不小心将 input 的height 或者 line-height 设置了, 可能就会导致蓝色光标异常显示的情况。

设计稿规则是 : 左侧是标题,input框位于同一行,靠右侧边缘。
思路是 : 由于本来是输入框右浮动,想要垂直居中,就使用了line-height。 现在改变了思路,使整一行靠右显示,将标题设置为浮动,此时就不需要考虑输入框的居中问题了。

// 原代码
 .label { }
.input{
	float : right ;
	height : 40px;
	line-height : 40px;
}
// 最终解决的方法是
.form-item{
	text-align : right
}
 .label { float : left }
.input{
	line-height:20px;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值