未输入文本时，表单文本光标尺寸错误

Question

我制作了一个表单及其输入文本。

HTML

<form action="/search" method="get" id="searchForm"><input type="text" id="searchText" name="q" value="{SearchQuery}" /></form>

CSS

 #searchText {
    text-align: center;
    position: relative;
    top: -2px;
    padding-top: 5px;
    width: 496px;
    font: 2em "Myriad", Helvetica, sans-serif;
    line-height: 1;
    color: #222222;
    border: 1px solid gray;
    border-radius: 2em;
 }

 #searchForm {
 }

它完美无缺，但看起来像这样：
注意光标如何向下移动而不是垂直居中。

然后，当输入任何文本时，它会将自身校正到正确的大小/垂直位置并变为
（甚至在删除文本时保持正确）。

如何才能正确初始化？

我尝试过设置

#searchForm { }

到vertical-align: center;      line-height: normal;或inherit      font-size: 1;
但没有效果。

Answer 1

快速修复建议：

padding: 2px 0;

会解决您的问题

#searchText {
    text-align: center;
    position: relative;
    top: -2px;
    padding: 2px 0; /* altered */
    width: 496px;
    font: 2em "Myriad", Helvetica, sans-serif;
    line-height: -2em;
    color: #222222;
    border: 1px solid gray;
    border-radius: 2em;
}

demo

为什么会发生

padding-top: 5px;正在按5px向下推动光标...因为你没有平衡这个padding从bottom光标强制推送下来！

Answer 2

如上所示在顶部和底部应用equal padding。同时删除top:-2px。

 #searchText {
text-align: center;
position: relative;
padding-top: 5px;
padding-bottom: 5px;
width: 496px;
font: 2em "Myriad", Helvetica, sans-serif;
line-height: 1;
color: #222222;
border: 1px solid gray;
border-radius: 2em;
}

DEMO