When ever you write <textarea></textarea> by default you see a text box with some width and height and also with resizing icon with which you can drag the width and height of that text area. In this tutorial I will show all the possible styling options for a Text area. Let's start.
html
<textarea id="myTextarea" placeholder="Write your message"></textarea>
css
#myTextarea {
width: 200px;
height: 100px;
border: none;
border-radius: 5px;
resize: none;
padding: 6px;
}
Let us explain the css to you. I hope you can pretty much understand the css written above but, I will explain you the use of each attribute.
- width sets the width of the text area. you can also use rows and cols attributes to set width and height.
- height sets the height of text area.
- border:none removes the default border around the text area.
- border-radius: 5px give smooth rounded corners around the text area.
- resize: none removes the default resizing icon present in bottom right corner of text area.
- padding gives the padding to the text area.
You can also give background-color, font-size and color to the text area.
