{"id":2783,"date":"2016-11-01T08:07:39","date_gmt":"2016-11-01T08:07:39","guid":{"rendered":"http:\/\/www.jquery-az.com\/?p=2783"},"modified":"2023-09-25T09:17:55","modified_gmt":"2023-09-25T09:17:55","slug":"html-textarea-resize-how-to-disable-with-3-demos","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/html-textarea-resize-how-to-disable-with-3-demos\/","title":{"rendered":"HTML textarea resize: How to disable with 3 demos"},"content":{"rendered":"

How to disable textarea resizing<\/strong><\/h3>\n

You may use the resize: none<\/em> <\/strong>property to disable resizing of a textarea in a web browser.<\/p>\n

Generally, the textarea can be stretched to expand that may affect different sections of a webpage.<\/p>\n

By using the CSS, you may disable this overall or by specifying a particular direction as shown in the examples below.<\/p>\n

A fixed size textarea example <\/strong><\/h3>\n

By simply using resize: none property, you may disable resizing of a textarea. See this demo where this is assigned to the textarea in <style> section:<\/p>\n

\"textarea<\/p>\n

See online demo and code<\/strong><\/h6>\n

You can see, textarea size cannot be increased or decreased horizontally or vertically. The size is specified by height and width properties by using CSS and it is fixed.<\/p>\n

<!DOCTYPE html>\r\n\r\n<html>\r\n\r\n<head>\r\n\r\n\u00a0\r\n\r\n<style>\r\n\r\n\u00a0\r\n\r\ntextarea {\r\n\r\n\u00a0\u00a0\u00a0 resize: none;\r\n\r\n\u00a0\u00a0\u00a0 height:300px;\r\n\r\n\u00a0\u00a0\u00a0 width:300px;\r\n\r\n}\r\n\r\n\u00a0\r\n\r\n<\/style>\r\n\r\n<\/head>\r\n\r\n<body>\r\n\r\n<h3>A demo of disabling textarea resize<\/h3>\r\n\r\n\u00a0\r\n\r\n<textarea readonly >\r\n\r\n<!DOCTYPE html>\r\n\r\n<html>\r\n\r\n<head>\r\n\r\n\u00a0\r\n\r\n<style>\r\n\r\n\u00a0\r\n\r\ntextarea {\r\n\r\n\u00a0\u00a0\u00a0 resize: none;\r\n\r\n}\r\n\r\n\u00a0\r\n\r\n<\/style>\r\n\r\n<\/head>\r\n\r\n<body>\r\n\r\n<h3>A demo of disabling textarea resize<\/h3>\r\n\r\n\u00a0\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n\u00a0\r\n\r\n<\/textarea>\r\n\r\n<\/body>\r\n\r\n<\/html><\/pre>\n
 <\/p>\n
Allowing resizing of textarea vertically only<\/strong><\/h3>\n
By using resize: vertical;<\/em> property, you may restrict resizing of the textarea vertically. Click on the link or image below to open the demo page and try resizing the textarea vertically and horizontally:<\/p>\n
\"textarea<\/p>\n
See online demo and code<\/strong><\/h6>\n
The code:<\/strong><\/p>\n
<!DOCTYPE html>\r\n\r\n<html>\r\n\r\n<head>\r\n\r\n\u00a0\r\n\r\n<style>\r\n\r\n\u00a0\r\n\r\n.txtarea {\r\n\r\n\u00a0\u00a0\u00a0 resize: vertical;\r\n\r\n\u00a0\u00a0\u00a0 height:200px;\r\n\r\n\u00a0\u00a0\u00a0 width:200px;\r\n\r\n}\r\n\r\n\u00a0\r\n\r\n<\/style>\r\n\r\n<\/head>\r\n\r\n<body>\r\n\r\n<h3>A demo of resize vertically<\/h3>\r\n\r\n\u00a0\r\n\r\n<textarea class=\"txtarea\" readonly >\r\n\r\n<!DOCTYPE html>\r\n\r\n<html>\r\n\r\n<head>\r\n\r\n\u00a0\r\n\r\n<style>\r\n\r\n\u00a0\r\n\r\ntextarea {\r\n\r\n\u00a0\u00a0\u00a0 resize: none;\r\n\r\n}\r\n\r\n\u00a0\r\n\r\n<\/style>\r\n\r\n<\/head>\r\n\r\n<body>\r\n\r\n<h3>A demo of disabling textarea resize<\/h3>\r\n\r\n\u00a0\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n\u00a0\r\n\r\n<\/textarea>\r\n\r\n<\/body>\r\n\r\n<\/html><\/pre>\n
 <\/p>\n
A demo of horizontal resizing<\/strong><\/h3>\n
In this demo, only horizontal resizing is enabled.<\/p>\n
\"textarea<\/p>\n
See online demo and code<\/strong><\/h6>\n
The code:<\/strong><\/p>\n
<!DOCTYPE html>\r\n\r\n<html>\r\n\r\n<head>\r\n\r\n\u00a0\r\n\r\n<style>\r\n\r\n\u00a0\r\n\r\n.txtarea {\r\n\r\n\u00a0\u00a0\u00a0 resize: horizontal;\r\n\r\n\u00a0\u00a0\u00a0 height:250px;\r\n\r\n\u00a0\u00a0\u00a0 width:250px;\r\n\r\n}\r\n\r\n\u00a0\r\n\r\n<\/style>\r\n\r\n<\/head>\r\n\r\n<body>\r\n\r\n<h3>A demo of resize horizontally<\/h3>\r\n\r\n\u00a0\r\n\r\n<textarea class=\"txtarea\" readonly >\r\n\r\n<!DOCTYPE html>\r\n\r\n<html>\r\n\r\n<head>\r\n\r\n\u00a0\r\n\r\n<style>\r\n\r\n\u00a0\r\n\r\ntextarea {\r\n\r\n\u00a0\u00a0\u00a0 resize: none;\r\n\r\n}\r\n\r\n\u00a0\r\n\r\n<\/style>\r\n\r\n<\/head>\r\n\r\n<body>\r\n\r\n<h3>Horizontally resize<\/h3>\r\n\r\n\u00a0\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n\u00a0\r\n\r\n<\/textarea>\r\n\r\n<\/body>\r\n\r\n<\/html><\/pre>\n
 <\/p>\n
In above two examples, you can see the CSS classes are used rather generally specifying the textarea in style section.<\/p>\n
This is because\u00a0the specific properties will apply to only particular textarea where you assign this class. If textarea was used like in the\u00a0first example, the restriction would have applied to all textarea in the web page.<\/p>\n","protected":false},"excerpt":{"rendered":"
How to disable textarea resizing You may use the resize: none property to disable resizing of a textarea in a web browser. Generally, the textarea can be stretched to expand that may affect different sections of a webpage. By using the CSS, you may disable this overall or by specifying a particular direction as shown … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":2784,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[20],"tags":[30],"yoast_head":"\nHTML textarea resize: How to disable with 3 demos<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.jquery-az.com\/html-textarea-resize-how-to-disable-with-3-demos\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML textarea resize: How to disable with 3 demos\" \/>\n<meta property=\"og:description\" content=\"How to disable textarea resizing You may use the resize: none property to disable resizing of a textarea in a web browser. Generally, the textarea can be stretched to expand that may affect different sections of a webpage. By using the CSS, you may disable this overall or by specifying a particular direction as shown ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/html-textarea-resize-how-to-disable-with-3-demos\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-11-01T08:07:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-25T09:17:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/10\/6.1-textarea-resize.png\" \/>\n\t<meta property=\"og:image:width\" content=\"333\" \/>\n\t<meta property=\"og:image:height\" content=\"363\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/html-textarea-resize-how-to-disable-with-3-demos\/\",\"url\":\"https:\/\/www.jquery-az.com\/html-textarea-resize-how-to-disable-with-3-demos\/\",\"name\":\"HTML textarea resize: How to disable with 3 demos\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2016-11-01T08:07:39+00:00\",\"dateModified\":\"2023-09-25T09:17:55+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/html-textarea-resize-how-to-disable-with-3-demos\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/html-textarea-resize-how-to-disable-with-3-demos\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/html-textarea-resize-how-to-disable-with-3-demos\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML textarea resize: How to disable with 3 demos\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML textarea resize: How to disable with 3 demos","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.jquery-az.com\/html-textarea-resize-how-to-disable-with-3-demos\/","og_locale":"en_US","og_type":"article","og_title":"HTML textarea resize: How to disable with 3 demos","og_description":"How to disable textarea resizing You may use the resize: none property to disable resizing of a textarea in a web browser. Generally, the textarea can be stretched to expand that may affect different sections of a webpage. By using the CSS, you may disable this overall or by specifying a particular direction as shown ... Read more","og_url":"https:\/\/www.jquery-az.com\/html-textarea-resize-how-to-disable-with-3-demos\/","article_published_time":"2016-11-01T08:07:39+00:00","article_modified_time":"2023-09-25T09:17:55+00:00","og_image":[{"width":333,"height":363,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/10\/6.1-textarea-resize.png","type":"image\/png"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/html-textarea-resize-how-to-disable-with-3-demos\/","url":"https:\/\/www.jquery-az.com\/html-textarea-resize-how-to-disable-with-3-demos\/","name":"HTML textarea resize: How to disable with 3 demos","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2016-11-01T08:07:39+00:00","dateModified":"2023-09-25T09:17:55+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/html-textarea-resize-how-to-disable-with-3-demos\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/html-textarea-resize-how-to-disable-with-3-demos\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/html-textarea-resize-how-to-disable-with-3-demos\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"HTML textarea resize: How to disable with 3 demos"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/2783"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=2783"}],"version-history":[{"count":3,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/2783\/revisions"}],"predecessor-version":[{"id":9872,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/2783\/revisions\/9872"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/2784"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=2783"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=2783"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=2783"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}