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:

Solution 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.

Solution 2

Sidenote: you don't need div#search_icon, your input could have the following background:

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

Solution 3

It doesn't look like you're showing all the css in your example (is there a div or two acting as the border?), but have you tried removing the height attribute and setting the padding-bottom to padding-top's value (9px)?