Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to disable resizable property of textarea using CSS?
In CSS we can use the ‘resize’ property to resize the textarea box of a webpage. We can resize the height and width of the textarea box. In case if we set the resize value to none, the textarea box will not resize.
In some situations, disabling the resizable functionality of a textbox area in HTML might be accessible if we wish to limit user interactions and control the layout of the input. The size of the text entry is important to the design and the layout of webpage or application is also required.
In this article, we will create a css code to disable the resizable property of text area.
Visual Representation of resizable and non-resizable textarea box
Syntax
<textarea>…write something…</textarea>
This element of textarea creates the box in the output and the user can write something there. The term textarea is defined by holding a large number of characters within a fixed font-size. The textbox can be used to represent the feedback or comment box.
Properties Used
The following properties used in the example are −
color − Define the color of the text.
font-weight − Define the text to be thin or thick.
text-align − Define the horizontal alignment of the text.
overflow − Define the content overflow of an element's box as specified by the overflow property. If the content of an element is too large to fit within the defined region, this property indicates whether to clip the content or add scrollbars.
height − Define the height of the textarea box.
weight − Define the weight of the textarea box.
resize − If the value is set to both it will resize the both height and weight of the textarea box. If the value is set to none it will not resize the textarea box.
Example
In this example, we will use internal CSS to design the element of h1 and h3. Then with the help of id class named resizable it sets the properties of the textarea box. If the resize property set the value as none then it will disable the textarea box.
<!DOCTYPE html>
<html>
<title>Resize the textarea box</title>
<head>
<style>
h1,h3{
color: darkgreen;
font-weight: bold;
text-align: center;
}
#resizable{
overflow: auto;
height: 200px;
weight: 220px;
resize: none;
}
</style>
</head>
<body>
<h1>Tutorialspoint</h1>
<h3><mark>Disable the resizable property of CSS</mark></h3>
<center>
<textarea id="resizable">This is real time to learn the technical course</textarea>
</center>
</body>
</html>
Conclusion
We saw in the above output that the height and weight of the textarea box are not resizable because we have defined the none value in the resize property. Sometimes it is right to disable the text box as the space mentioned plays an important role while building a website.
584 Views
