Fixing the size of text area and removing resize icon using CSS

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.