CSS Disable Resizable Textarea

• CSS Disable Resizable Textarea
• Disable all textarea
• Disable Specific textarea
• Example Disable Resizable Textarea

Normally, when we use <textarea> in HTML it’s resizable. If you click at the bottom and start dragging using mourse it will expand. So, if you want to disable the textarea to resize use the following method.

Disable all textarea

textarea {
  resize: none;
}

We can also disable a specific textarea using the name attribute. Check the following example, it will disable the textarea whose name attribute is ’editor’ <textarea name='editor'></textarea>

Disable Specific textarea

textarea[name=editor] {
  resize: none;
}

We can also disable a specific textarea using the id or class.

Example Disable Resizable Textarea

  <style>    
      textarea[name=editor]{ /* using name */
        resize: none;
      }
      #editor2{ /* using Id */
        resize: none;
      }
      .editor3{ /* using class name */
        resize: none;
      }
  </style>
  
  <textarea name='editor'></textarea>
  
  <textarea id='editor2'></textarea>
  
  <textarea class='editor3'></textarea>

Click here if you are interested to read more about resize.