在与jQuery JavaScript或CSS的输入框垂直对齐文本光标（插入符号？）(Vertica

我与在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 = 45像素。 光标被垂直居中的身高×45像素的输入框，但你的边框与周围高大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 ）？

文章来源: Vertically aligning the text cursor (caret?) in an input box with jQuery, Javascript or CSS