CODEWITHSUNDEEP
htmlcssgoogle-chrome
rogerb
rogerb

Reputation: 251

Cursor in Input field is not vertically aligned in Chrome

Ever since I upgraded to the latest Chrome (38.0.2125.111 m), it seems like the cursor in my input fields is no longer vertically aligned. It seems to hug the top but as soon as you start typing something, it comes to the center.

I'm very sure that this used to be vertically aligned in the center in older versions of Chrome and still works appropriately in IE 10 and Firefox (33.0.2)

<input name="data1" id="data1" type="text" class="long-field" value="">

.long-field {
    float: left;
    width: 360px;
    height: 35px;
    line-height: 35px;
    padding: 0 0 0 5px;
    margin-bottom: 8px;
}

I've also created a JSFiddle - https://jsfiddle.net/cp2nctmh/

I tried to use the vertical-align css property but couldn't quite get it to work. Would appreciate your help.

Upvotes: 4

Views: 3758

Answers (2)

nunoarruda
nunoarruda

Reputation: 2904

Change line-height: 35px to line-height: 1

With line-height: 1 you're using number values (https://developer.mozilla.org/en-US/docs/Web/CSS/line-height). I have read several times that number values were the most appropriate value to use with line-height.

If I'm not mistaken, 1 equals the height of the font-size. So if you change the font-size the line-height also changes.

Upvotes: 4

Tiago Moreira
Tiago Moreira

Reputation: 7

Just try removing line-height property, it worked for me.

.long-field {
    float: left;
    width: 360px;
    height: 35px;
    padding: 0 0 0 5px;
    margin-bottom: 8px;
}
<input name="data1" id="data1" type="text" class="long-field" value="">

Upvotes: 0

Related Questions