html - 未输入文本时，表单文本光标大小错误

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 字体大小: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 光标被强制下推!