- HTML Tag
- Syntax
- Example of the HTML tag:
- Result
- Styling the element with CSS
- Example of the HTML tag with CSS properties:
- Attributes
- How to style tag?
- Common properties to alter the visual weight/emphasis/size of text in tag:
- Coloring text in tag:
- Text layout styles for tag:
- Other properties worth looking at for tag:
- How to Style HTML with CSS (Quick Hacks)
- How to Style Textarea Placeholder
- How to Style Text in Textarea
- How to Add Default Text in Textarea
- Remove Resize Handler in Textarea
- How to Resize Textarea Vertically
- How to Resize Textarea Horizontally
- How to Remove The Glow Around Textarea
- Textarea Nowrap
- How to Make Textarea Responsive
- How to Style Scrollbar in Textarea
- How to Remove Default Scrollbars in Internet Explorer
- All HTML Textarea Attributes
- Conclusion
HTML Tag
The tag defines a form field where user can input a multi-line text. Unlike the tag, text wrapping inside is allowed when the form is submitted.
A text area can have an unlimited number of characters. The text within this tag is rendered in a fixed-width font (usually Courier).
Syntax
The ) tags.
Example of the HTML tag:
html> html> head> title>Title of the document title> head> body> form action="/form/submit" action="post"> textarea name="comment" rows="12" cols="35">Send your comments to the author. textarea>br> input type="submit" name="submitInfo" value="Submit"> form> body> html>Result
In this example we use the to define the text field, the name attribute to assign a name to this field (“comment”), the rows attribute to set its height (12 symbols) and the cols attribute to set its width (35 symbols).
Styling the element with CSS
The tag is considered to be a replaced element, as it has some intrinsic dimensions. Styling this tag is relatively easy with regular CSS.
Its valid and invalid values can be highlighted with the :valid and :invalid pseudo-classes. Valid and invalid values of a element can be highlighted using the :valid and :invalid pseudo-classes.
In most browsers,
Example of the HTML tag with CSS properties:
html> html> head> title>Title of the document title> style> .comment < width: 60%; height: 100px; padding: 10px; outline: 0; border: 3px solid #1c87c9; background: #d0e2bc; line-height: 20px; > style> head> body> form> p>Here we use CSS styles to customize the look of the text field. p> textarea class="comment"> Send your comments to the author. textarea> br> input type="submit" name="submitInfo" value="Submit"> form> body> html>In this example we use CSS styles to customize the look of the text field.
Attributes
| Attribute | Value | Description |
|---|---|---|
| autocomplete | on off | Specifies whether or not a text field should have autocomplete enabled. |
| autofocus | autofocus | Defines that a text area should automatically get focus when the page loads. |
| cols | number | Defines the visible width of a text area. Default value is 20 symbols. |
| dirname | textareaname.dir | Defines the text direction of the textarea when submitted. |
| disabled | disabled | Defines that a text area should be disabled. |
| form | form_id | Defines one or more forms the text area belongs to (via id). |
| maxlenght | number | Defines the maximum number of characters allowed in the text area. |
| minlength | number | Defines the minimum number of characters allowed in the text area. |
| name | text | Defines a name for a text area. |
| placeholder | text | Defines a short hint that describes the expected value of a text area. The hint is shown when the field is empty, and disappears when it gets focus. |
| readonly | readonly | Defines that a text area is read-only. |
| required | required | Defines that a text area must be filled out before the form is sent. |
| rows | number | Defines a visible number of rows in a text area. Default value is 2. |
| spellcheck | true false default | Specifies whether the text in the tag should be spell checked by the underlying browser/OS. |
| wrap | Defines how the text in a text area is to be wrapped when the form is submitted. | |
| soft | -(default value) the text is sent without any additional line breaks inserted. | |
| hard | -the browser automatically inserts line breaks so that each line has no more than the width of the control; for this to take effect the cols attribute must be specified. |
How to style tag?
Common properties to alter the visual weight/emphasis/size of text in tag:
- CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit.
- CSS font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
- CSS font-size property sets the size of the font.
- CSS font-weight property defines whether the font should be bold or thick.
- CSS text-transform property controls text case and capitalization.
- CSS text-decoration property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style.
Coloring text in tag:
- CSS color property describes the color of the text content and text decorations.
- CSS background-color property sets the background color of an element.
Text layout styles for tag:
- CSS text-indent property specifies the indentation of the first line in a text block.
- CSS text-overflow property specifies how overflowed content that is not displayed should be signalled to the user.
- CSS white-space property specifies how white-space inside an element is handled.
- CSS word-break property specifies where the lines should be broken.
Other properties worth looking at for tag:
- CSS text-shadow property adds shadow to text.
- CSS text-align-last property sets the alignment of the last line of the text.
- CSS line-height property specifies the height of a line.
- CSS letter-spacing property defines the spaces between letters/characters in a text.
- CSS word-spacing property sets the spacing between words.
How to Style HTML with CSS (Quick Hacks)
Styling a is not the same as styling an HTML because both have different types of usages. We use when we need to write multiple lines of text.
That’s why sometimes it seems difficult to style a and also does not match with other boxes. Textarea also has some extra things to handle and customize like, scrollbar, font, and placeholder, we can resize the textarea, etc.
In this article, you will learn how you can style HTML very easily. You will get detailed information about this topic.
How to Style Textarea Placeholder
You can use many attributes with this tag. For example, title, cols, rows, wrap, etc. You will find a list of attributes that accepts at the end of this article.
In order to, add a placeholder like any other tag you have to use placeholder attribute in .
To add style to the placeholder in you can use the following code. We select ::placeholder in the CSS file to add any style to the placeholder.
/* Modern Browsers */ textarea::placeholder < font-size: 1rem; color: #9c9c9c; font-family: 'Roboto', sans-serif; >/* WebKit, Edge */ textarea::-webkit-input-placeholder < font-size: 1rem; color: #9c9c9c; font-family: 'Roboto', sans-serif; >/* Firefox 4-18 */ textarea:-moz-placeholder < font-size: 1rem; color: #9c9c9c; font-family: 'Roboto', sans-serif; >/* Firefox 19+ */ textarea::-moz-placeholder < font-size: 1rem; color: #9c9c9c; font-family: 'Roboto', sans-serif; >/* IE 10-11 */ textarea:-ms-input-placeholder < font-size: 1rem; color: #9c9c9c; font-family: 'Roboto', sans-serif; >/* Edge */ textarea::-ms-input-placeholder
Most of the modern browsers support just ::placehoder but to support other browsers we can use other versions like, -ms- , -moz- , -webkit- etc.
In the demo, I have used font-size , color, and font-family but you can use any CSS style you want. From now on you can customize your textarea placeholder according to your need.
How to Style Text in Textarea
You can style text inside textarea similarly as you can do with any other HTML inputs. You can also use any CSS property like font-size , font-family , color , etc.
To add the fonts to your website Google Fonts would be a great choice because they provide a lot of options and this is absolutely free. When someone writes text inside then the text will use that font.
How to Add Default Text in Textarea
You can add default text in your input. This text will be shown automatically inside textarea input box. Users can change that or completely replace it with their own text.
This is especially helpful if users have to write a similar type of text all the time. In this case, you can set a default text and users will edit the default text. It will save them time.
To add default text in textarea input you just have to place your text in between the opening tag . It is done.
Remove Resize Handler in Textarea
By default, browsers add resize handler in to the bottom right corner. You can click and drag to increase or decrease the size of the textarea input.
If you don’t need this feature, you can disable this with just one line of CSS.
How to Resize Textarea Vertically
If you don’t want to remove the resize handler completely then you have other options as well. You can allow your users to resize the vertically.
If you add the following CSS property then users will be able to resize your textarea only vertically.
How to Resize Textarea Horizontally
On the other hand, if you don’t want to change the size of your vertically but horizontally, you can do that too.
Following CSS property will make your textarea horizontally resizable.
How to Remove The Glow Around Textarea
In most browsers, when you focus or write inside the a glow or border appears. Some people like it but some don’t.
If this glow border does not fit with your design and you want to remove it, you can do that.
You can also apply this style using :focus pseudo-class as well both work the same.
Textarea Nowrap
Normally we use white-space: nowrap; to prevent text from wrapping. In this way, you can write in an input box as long as you want without any line breaks. The browser will show a horizontal scrollbar.
You can customize this default scrollbar if you want. I will show you how you can style textarea scrollbar in the next sections.
When you press Enter , you move to the next line. But this CSS property does not work with . To get a similar result, you have to use the wrap=»off» attribute in your input.
How to Make Textarea Responsive
You can make the responsive in many ways. As you have seen, you can control resize handler in textarea.
You can also apply width , height , min-width , max-width , min-height and max-height properties to make it responsive.
In the above code, we have set width: 100%; so by default textarea will take the full area. But max-width: 900px; means textarea will not be bigger than 900px.
If screen size increases, textarea size will increase up to 900px not more than that. It is also helpful if you set resize: horizontal; .
Users can resize textarea input but when you set max-width: 900px; users will be able to increase the textarea up to 900px. You can also set min-width if you want. Then users will not be able to decrease the size more than that.
It also works a similar way when you use the height property. Here default height of the will be 300px.
But when you set resize: vertical; then users will be able to increase its height up to 500px and decrease its height up to 200px.
How to Style Scrollbar in Textarea
When we add height to the and users write multiple lines of text then the browser shows a default scrollbar. Scrollbar may come horizontally and vertically.
If you don’t like the default look of those, you can style them according to your need. You can change their color, width, background, etc. And you don’t have to do this separately. You can customize both of them at the same time.
textarea::-webkit-scrollbar < width: 15px; background-color: #f5f5f5; box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); >textarea::-webkit-scrollbar-thumb
This will add a custom scrollbar to your input on both sides. Here, textarea::-webkit-scrollbar will style the background of the scrollbar and textarea::-webkit-scrollbar-thumb will style the scrollbar thumb, the part that moves.
But the above code will not work on the Firefox browser. Don’t worry you have another option.
You should add this code along with the above code then users will be able to see a custom scrollbar in both Chrome and Firefox browsers.
Firefox does not provide much customization options as Chrome does. You can not set a custom width for the scrollbar. The property scrollbar-width accepts only 3 values auto , thin , and none .
Here, auto is the default value and none will remove your scrollbar in the Firefox browser. This is also an experimental technology. So I would suggest you not use this part on your main website.
If you want to know more about scrollbars, you can follow our ultimate guide on scrollbar customization.
But you can use 1 st part textarea::-webkit-scrollbar and textarea::-webkit-scrollbar-thumb , this will work just fine.
How to Remove Default Scrollbars in Internet Explorer
Internet Explorer adds a vertical scrollbar by default in the textarea even if there is no text in it. It does not look good.
You can hide the default scrollbar using overflow: hidden; property. But the problem is you don’t get any scrollbar at all when a user writes multiple lines of text. So, it is not an ideal solution.
Therefore, we should use overflow: auto; this to remove the default scrollbar and it appears when needed.
All HTML Textarea Attributes
Here is the list of attributes that you can use in the HTML tag.
Conclusion
In this article, we have seen multiple ways how you can style your HTML textarea. I hope from now on you will be able to customize your textarea input according to your need.