April 25, 2012

Input fieldset with border-radius and shadow not showing all text in IE9

Question by Hommer Smith

I have the following css:

fieldset ul li input {
  width: 96%;
  margin: 0;
  padding: 6px;
  font-size: 13px;
  border: 1px solid #CCC;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  -moz-box-shadow: 0 2px 2px white, inset 0 1px 3px #EEE;
  -webkit-box-shadow: 0 2px 2px white, inset 0 1px 3px #EEE;
  box-shadow: 0 2px 2px white, inset 0 1px 3px #EEE;
}

Which is working under Firefox and Chrome. However in IE9, when I insert some text, I can’t see it completely. As you can see is hidden in the half of it:

IE9 fieldset input problem

Answer by Starx

Either increase the height or the padding.

input {
    padding: 10px;
}
...

Please fill the form - I will response as fast as I can!