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

结果:

搜索http://i26.tinypic.com/29lhjf9.png

Answer 1

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

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

我(非常高度)推荐使用Firebug.这对于搞清楚这些事情非常有用.