text field cursor issue in chrome

Question

I am using following css in my form section.

CSS

<         


        

Answer 1

I found a solution that works in the latest versions of Chrome and Firefox, and IE 8 and 9. I didn't test any other browsers because I didn't need to support anything lower than IE 8.

.issue {
  font-size: 14px;
  height: 44px;
  line-height: 44px;
  padding: 0 10px;
  vertical-align: top;
}

.solution {
  font-size: 14px;
  line-height: 14px;
  height: 14px;
  padding: 15px 10px;
}

see the live demo on http://jsbin.com/usimeq/1

Edit: Forgot to add that the first input shows the issue, second shows the solution.

Basically just setting the line-height and height to the same as the font size and adjusting the input using padding afterwards to match the intended overall height.

Hopefully it helps anyone else running into this annoying issue.