CODEWITHSUNDEEP
htmlcss
Peter V
Peter V

Reputation: 2488

Form text cursor wrong-sized when no text is entered

I made a form and its input text.

HTML

<form action="/search" method="get" id="searchForm"><input type="text" id="searchText" name="q" value="{SearchQuery}" /></form>

CSS 

 #searchText {
    text-align: center;
    position: relative;
    top: -2px;
    padding-top: 5px;
    width: 496px;
    font: 2em "Myriad", Helvetica, sans-serif;
    line-height: 1;
    color: #222222;
    border: 1px solid gray;
    border-radius: 2em;
 }

 #searchForm {
 }

And it works perfectly but looks like this: 1
Notice how the cursor is moved down and not centered vertically.

Then, when any text is entered, it corrects itself to the right size/ vertical position and becomes enter image description here
(and even stays correct when text is deleted).

How can I make it also initialise correctly?

I've tried setting the 

#searchForm { }

to vertical-align: center; line-height: normal; or inherit font-size: 1;
but to no effect.

Upvotes: 0

Views: 45

Answers (2)

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13998

Apply equal padding on top and bottom like below. Also remove the top:-2px.

 #searchText {
text-align: center;
position: relative;
padding-top: 5px;
padding-bottom: 5px;
width: 496px;
font: 2em "Myriad", Helvetica, sans-serif;
line-height: 1;
color: #222222;
border: 1px solid gray;
border-radius: 2em;
}

DEMO

Upvotes: 1

NoobEditor
NoobEditor

Reputation: 15911

Quick fix suggestion :

padding: 2px 0;

would solve your problem

#searchText {
    text-align: center;
    position: relative;
    top: -2px;
    padding: 2px 0; /* altered */
    width: 496px;
    font: 2em "Myriad", Helvetica, sans-serif;
    line-height: -2em;
    color: #222222;
    border: 1px solid gray;
    border-radius: 2em;
}

demo

why its happening

padding-top: 5px; is pushing down the cursor by 5px...since your are not balancing this padding from bottom cursor is forced to push down!

Upvotes: 1

Related Questions