javascript - 使用 jQuery、Javascript 或 CSS 垂直对齐输入框中的文本光标(插入符号？)

Question

我在 CSS 的输入框上弄乱了 CSS，使文本变大，添加边框，改变颜色等。

我已经使用填充将较大的文本对齐(垂直对齐)在我的输入框中，但是闪烁的小文本光标对齐得非常糟糕(紧贴底部)。我想知道是否有一种方法可以自行调整闪烁的文本光标，而不会弄乱文本的位置。

谢谢!马特

这是 CSS:

div#search_box {
    height:32px;
    width: 366px;
    float:left;
    margin-left:86px;
    margin-top:14px;
    background-color: #ffffff;
    border: 2px solid #b66b01;
}

input#search_input {
    border:none;
    position: relative;
    float: left;
    height: 32px;
    width: 335px;
    font-size: 18px;
    padding-top: 9px;
    padding-left: 4px;
    outline-style:none;
    font-family: Helvetica, Arial, "MS Trebuchet", sans-serif;
    color: #5a5a5a;
}

div#search_icon {
    width:22px;
    height:24px;
    float:right;
    margin-right:5px;
    margin-top:4px;
    cursor: pointer;
    background: url('images/magnifier.png');
}

HTML:

<div id="search_box">
     <input type="text" name="query" id="search_input" autocomplete="off"/>
     <div id="search_icon">
</div>

结果:

Answer 1

您的问题是您在指定输入框的高度时没有考虑到输入框的填充。

您指定的高度为 32 像素，但会添加任何填充，因此输入框的高度实际上是 32 + 9 + 4 = 45 像素。光标在 45px 高的输入框中垂直居中，但您的边框位于 32px 高的 div 周围。将搜索输入中的“高度:32 像素”更改为“高度:19 像素”即可。

我(非常强烈)推荐使用 Firebug .它对于弄清楚这类事情非常有用。