使用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

您的问题是，当您指定其高度时，您没有考虑输入框上的填充。

您指定的高度为32px，但任何填充都会添加到该高度，因此输入框的高度实际上是32 + 9 + 4 = 45px。光标在45px高输入框中垂直居中，但您的边框大约是32px高的div。在搜索输入上将“高度：32px”更改为“高度：19px”，它可以正常工作。

我（非常高度）建议使用 Firebug 。这对于搞清楚这些事情非常有用。

Answer 2

旁注：您不需要 div＃search_icon ，您的输入可能具有以下背景：

  background: white url('images/magnifier.png') no-repeat right NNpx;

Answer 3

看起来你的示例中没有显示所有的css（是否有一个或两个div作为边框？），但你是否试过删除 height 属性和设置 padding-bottom 到 padding-top 的值（ 9px ）？