Vertically aligning the text cursor (caret?) in an input box with jQuery, Javascript or CSS

Question

I'm messing with the CSS on an input box in CSS, to make the text bigger, adding a border, changing color, etc.

I've aligned the bigger text to fit nicely (vertically-aligned) within my input box using padding, but the little blinking text cursor is terribly aligned (hugs the bottom). I'm wondering if there is a way to adjust the blinking text cursor on its own without messing up the positioning of the text.

Thanks! Matt

Heres the 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>

Result:

Answer 1

Your problem is that you're not taking into account padding on the input box when you're specifying its height.

You're specifying a height of 32px, but any padding gets added to that, so the height of your input box is actually 32 + 9 + 4 = 45px. The cursor is being vertically centered in the 45px tall input box, but your border is around the 32px tall div. Change 'height: 32px' to 'height: 19px' on the search input and it works.

I (very highly) recommend using Firebug . It's very useful for figuring out these sorts of things.

Answer 2

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

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

Answer 3

它看起来不像你在你的例子中显示所有的css（是否有一个或两个div作为边界？），但你是否尝试删除height属性并将padding-bottom设置为padding-top 's价值（ 9px ）？