正文

input光标错位

IP云
IP云V管理员/6 阅读
09/02
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

文档结构

<div class="noteWrap">
<input type="text" placeholder="写留言" />
<img src="data:images/camera.png" />
</div>

设置样式：

.noteWrap{
height: 50px;
}
input{
line-height: 50px;
}

在ios上出现输入文字前光标占满输入框，输入文字后，光标不再占满输入框，而是底部和文字底部齐平。

原因：ios光标是和文字底部对齐的

解决方案：input去掉line-height，设置固定高度，父元素设置padding

.noteWrap{
height: 50px;
padding: 15px 5px;
}
input{
height: 20px;
}

也可以给input设置padding撑开