text field cursor issue in chrome

Question

I am using following css in my form section.

CSS

<         


        

Answer 1

Up-to-date answer (October 2014)

After playing around & observing what "reference" projects are doing, I realized one thing: we're doing it wrong.

In short: for a solid & clean cross-browser solution one must not use line-height property to make the input type="text" element higher but rather the padding property.

---

Cross browser issues

As pointed out in the question, browsers interpret the line-height property for the input type="text" element in different ways.

In this case, for Chrome back then in 2012 & even still now in October 2014 (version 37), it is for the cursor position.

Notice that a related bug was filed in June 2010, https://code.google.com/p/chromium/issues/detail?id=47284, but then closed as obsolete (who knows why?): but the provided live bug replication, http://jsbin.com/avefi/2 , still shows the chrome bug at the time of writting (October 2014 - chrome 37).

Note that Valli69's answer also identified line-height property as the source of the problem. But then used some rather hacky/dirty/risky IE8 & IE9 fixes (with \0/ and \9). A related question on those technics on Ie8 CSS Hack - best method?

---

What about NOT using line-height nor height property ?

This solution is simple & is even supported by modern and old browsers!

1) Solution in a streamlined example

/* 
 * [1] overrides whatever value "line-height" property was given by any other selector
 *     note: make it "line-height: normal !important;" if necessary
 * [2] overrides whatever value "height" property was given by any other selector
 *     note: make it "height: auto !important;" if necessary
 */
.username {
  line-height: normal;  /* [1] */
  height: auto;  /* [2] */
  padding-top: 10px;
  padding-bottom: 10px;
}

Live demo on http://jsbin.com/yadebenoniro/1/edit?html,css,output (ps. test on IE8 using this url http://jsbin.com/fugegalibuha/1 )

Tested on Windows OS on: IE8+, IE11, Chrome 38, & Firefox 32.

2) Solution in the context of the question

/*
 * [1] overrides whatever value line-height property was given by any other selector
 *     note: make it "line-height: normal !important;" if necessary
 * [2] overrides whatever value "height" property was given by any other selector
 *     note: make it "height: auto !important;" if necessary
 *
 * [3] use the padding-top, padding-bottom to adjust the height of your input type text
 * [4] keep in mind that when changing the font-size value you will have to adjust the padding top and padding bottom if you want to keep the same height as previously
 */
.username input {
  background-color: #FFFFFF;
  border: 2px solid #DDDDDD;
  border-radius: 5px;
  color: #9E9E9E;
  height: auto;  /* [2] */
  line-height: normal;  /* [1] */
  margin: 15px 0px 0px 0px; 
  padding: 10px 5px 10px 5px;  /* [3] */
  width: 330px;
  font-size: 20px;  /* [4] */
}

Live demo on http://jsbin.com/busobokapama/1/edit?html,css,output (ps. test on IE8 using this url http://jsbin.com/busobokapama/1 )

Tested on Windows OS on: IE8+, IE11, Chrome 38, & Firefox 32.

3) Further explanations

This idea came to me after taking a look at Foundation: it uses the height and padding properties only: the line-height property is left to its default brower-provided value, that is line-height: normal.

See by yourself: by inspecting the input type="text" elements on foundation's form component demo page http://foundation.zurb.com/docs/components/forms.html

The only thing is that even "just" using height and padding seems a problem for IE8 so I decided to even remove the height property.

---

Conclusion

This solution obviously has the massive advantage of a simple code, that "just works" across all browsers.

But it also has the drawback of NOT letting you have full control of the calculated total height: computed height property (font-size + abitrary number of pixels) + padding-top + padding-bottom + (border-width x 2). The "computed height property" seems to vary from browsers to browsers, hence the "abitrary number of pixels" naming.

It's up to you to decide what you favor most: simple code or pixel-precise design.

---

Resources

• https://developer.mozilla.org/en-US/docs/Web/CSS/height
• https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
• HTML: is input box default/calculated content height different across browsers