HTML输入文本光标位置问题答案

【问题标题】：HTML input text cursor position issueHTML输入文本光标位置问题
【发布时间】：2017-02-14 04:16:12
【问题描述】：

只是想寻求您的帮助。 html页面加载时，输入文本上的光标太高或位置不对：

但是当焦点对准时，输入文本光标是正确的：

在此处找到另一个相同的问题，但 line-height 修复无法解决我的问题。

css:

input[type=text] {
    border-radius: 0 !important;
    height: 50px !important;
    font-size: 14px !important;
    box-shadow: none !important;
    line-height: 100% !important;
}

【问题讨论】：

请包含所有代码，以便我们有一个minimal reproducible example。
css 选择器应该是input[type="text"]

标签： html css input

【解决方案1】：

这是填充问题。当您单击输入恶魔时，它会聚焦，然后会得到一个填充，因此光标位于正确的位置。所以像下面这样设置填充 -

input[type=text] {
    border-radius: 0 !important;
    height: 50px !important;
    font-size: 14px !important;
    box-shadow: none !important;
    line-height: 100% !important;
    padding: adjust according to your choice;
}

【讨论】：

还是不行，我决定根据光标减小行高，但这不是解决办法。

【解决方案2】：

试试

line-height: normal;

通常它有助于解决类似的问题。

【讨论】：