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" autoplete="off"/>
     <div id="search_icon">
</div>

Result:

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" autoplete="off"/>
     <div id="search_icon">
</div>

Result:

• javascript
• jquery
• html
• css
• input

Share Improve this question Follow edited Apr 3, 2019 at 1:59 Glorfindel 22.7k1313 gold badges8989 silver badges119119 bronze badges asked Jul 31, 2009 at 7:05 MattMatt 23k2525 gold badges8585 silver badges118118 bronze badges 3

• Showing us the code will be helpful. Also, does this happen across different browsers? – Randell Commented Jul 31, 2009 at 7:11
• Well it looks different in other browsers, but none of them look ideal. This picture is from firefox. – Matt Commented Jul 31, 2009 at 7:26
• Oh gosh.. Ummm... Whatever an undefined DOCTYPE would be? Why is that relevant? (I have very little experience with that stuff.) – Matt Commented Jul 31, 2009 at 9:25

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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) remend using Firebug. It's very useful for figuring out these sorts of things.

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;

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