CODEWITHSUNDEEP
javascriptjqueryhtmlcssinput
Matt
Matt

Reputation: 22901

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

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:

search

Upvotes: 4

Views: 13141

Answers (3)

Sam DeFabbia-Kane
Sam DeFabbia-Kane

Reputation: 2609

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.

Upvotes: 6

FelipeAls
FelipeAls

Reputation: 22161

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;

Upvotes: 2

ironsam
ironsam

Reputation: 630

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)?

Upvotes: 1

Related Questions