Search code examples
htmlcssforms

Padding-bottom for textarea isn't considered


When I set a padding to a textarea, it works okay on the first look. But when I type content that goes beyond the textarea height (when you start seeing the scroller) the padding-bottom ceases to exist. Is there a way to fix this? It seems to be a default behavior. You can see a very basic example here: http://jsfiddle.net/corinne/LKkky/ PS. Browser used is Chrome. PS2. Just tried with Firefox and actually the padding stays.


Solution

  • Chrome, Safari and Internet Explorer render the textarea paddings differently to Firefox and Opera. Now which of them render the textareas incorrectly? That depends on what you are trying to achieve because in truth none of them render it wrongly, they all add padding it just comes down to how they interpretated the spec.

    No CSS property will fix this 'issue' so the only way you can get around this 'problem' is to add a container element to the textarea and give that a padding instead.