0

I have added padding bottom to the textarea element and the text goes beyond the padding area. My expectation is it would scroll till the padding area only.

Attaching a screenshot for reference

enter image description here

textarea {
  padding-bottom: 20px;
}
<textarea id="w3review" name="w3review" rows="10" cols="50">
At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.
</textarea>
Dimple
  • 173
  • 2
  • 13
  • 2
    I think that this is not that simple of a solution as adding padding. There are few workarounds but I didn't find nothing that would work without doing some additional work (like wrapping textarea in div that will mimic textarea or adding border that pretends to be padding). Check more ways to handle it here https://stackoverflow.com/questions/42631947/maintaining-a-padding-inside-of-text-area – Jacck Mark Jun 14 '23 at 10:35

1 Answers1

0

Adjust the padding as needed.

  textarea {
        padding-bottom: 5px;
        height: 170px;
    }