CODEWITHSUNDEEP
csstwitter-bootstrap
Noel Llevares
Noel Llevares

Reputation: 16097

bootstrap CSS styling of text input placeholder

I've been racking my brains out to fix this but I am not an HTML/CSS expert so I'm out of my wits.

The placeholder text is shown too high from the center of the input box element.

See the following image:

placeholder too high

How can I fix this? You can see them live at http://siliconalley.com. When you type inside the input, it actually looks alright. It's just the placeholder that is looking weird.

Upvotes: 0

Views: 8049

Answers (4)

Suresh Pattu
Suresh Pattu

Reputation: 6219

your CSS is looking Like this
Actually it is line-height problem

.navbar-search .search-query {
margin-bottom: 0;
padding: 4px 14px;
font-family: Open Sans,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 13px;
font-weight: normal;
line-height: 1;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}

Change to Like this

.navbar-search .search-query {
    margin-bottom: 0;
    padding: 4px 14px;
    font-family: Open Sans,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: 21px; /**change the Line-height to like this**/
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    }

Upvotes: 0

Markus Fantone
Markus Fantone

Reputation: 341

You can force the line-height style the value of auto, with that u will fix the problem in Chrome and won't mess up in IE. I've tested on FF, Chrome and IE

.search-query {
    line-height: auto !important;
}

Upvotes: 0

robooneus
robooneus

Reputation: 1344

Your line-height:1; declaration is causing the problem. Remove this for .navbar-search .search-query and it should be fine.

Upvotes: 0

Patsy Issa
Patsy Issa

Reputation: 11303

Your current line-height is 1, change it so it is equal to the height of your element and it becomes centered.

line-height: 30px;

Upvotes: 3

Related Questions