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.

<input class="issue" type="text" />
<input class="solution" type="text" />

.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.

Answer 2

Just replacing line-height:30px; with height:30px; in your jsFiddle worked for me.

Answer 3

Remove line-height attribute from your css class, I think it will help you
updated fiddle: http://jsfiddle.net/4Etyn/16/

<div class="username">
    <input name="txtFullName" id="txtFullName" type="text" class="user" value="Username" onBlur="if(this.value=='') this.value='Username'" onFocus="if(this.value =='Username' ) this.value=''"  />
</div>

.username input{
    background-color: #FFFFFF; 
    border: 2px solid #DDDDDD;
    border-radius:5px;            
    color: #9E9E9E;
    height: 30px; 
    height: 22px\0/; 
    width: 330px; 
    padding:0px 10px 0px 10px; 
    padding:8px 10px 0px 10px\0/;  
    margin:15px 0px 0px 0px;
    vertical-align:middle;
}
:root .username input{
    height: 30px\9;
    padding:0px 10px 0px 10px\9;
}

Answer 4

Here's sample css for inputs that will be aligned in IE8 and won't show giant cursor in Chrome.

line-height: 14px/*to enclose 13px font, override this if needed*/;
height: 14px/*to enclose 13px font, override this if needed*/;
/*Padding is needed to avoid giant cursor in webkit, which we get if
height = line-height = 22px.*/
padding: 6px 8px;

Answer 5

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;
}
<input class="username" type="text" placeholder="Username" />

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