How to disable the resize grabber of ?</a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2011-03-11T10:33:20.473" class="fromnow">Mar 11 '11 at 10:33</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2019-06-24T20:27:06.453" datetime="2019-06-24T20:27:06.453">Jun 24 '19 at 20:27</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 587,234 times"> <span class="fc-light mr2">Viewed</span> 5.9e+01k times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="5271782" data-ownerid="637378" data-score="589"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="5271782"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="589">589</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value="0">0</div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>How to disable the grabber in the <code><textarea></code>?</p> <p>I mean that triangle thing which appears in the right-bottom corner of the <code><textarea></code>.</p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/html" class="post-tag js-gps-track" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/css" class="post-tag js-gps-track" title="show questions tagged 'css'" rel="tag">css</a> <a href="../../questions/tagged/forms" class="post-tag js-gps-track" title="show questions tagged 'forms'" rel="tag">forms</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited Jun 24 '19 at 20:16">edited Jun 24 '19 at 20:16</time> <a href="../../users/3345644/alexander-abakumov" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/3345644.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Alexander Abakumov" /> </a> <div class="s-user-card--info"> <a href="../../users/3345644/alexander-abakumov" class="s-user-card--link">Alexander Abakumov</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">13,617</li> <li class="s-award-bling s-award-blinggold" title="16 gold badges">16</li> <li class="s-award-bling s-award-blingsilver" title="88 silver badges">88</li> <li class="s-award-bling s-award-blingbronze" title="129 bronze badges">129</li> </ul> </div> </div> </div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Mar 11 '11 at 10:33">asked Mar 11 '11 at 10:33</time> <a href="../../users/637378/jack-billy" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/637378.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Jack Billy" /> </a> <div class="s-user-card--info"> <a href="../../users/637378/jack-billy" class="s-user-card--link">Jack Billy</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">7,141</li> <li class="s-award-bling s-award-blinggold" title="6 gold badges">6</li> <li class="s-award-bling s-award-blingsilver" title="27 silver badges">27</li> <li class="s-award-bling s-award-blingbronze" title="38 bronze badges">38</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">3 Answers<span style="display:none;" itemprop="answerCount">3</span></h2> </div> </div> </div> <a name="5271803"></a> <div id="answer-5271803" class="answer accepted-answer" data-answerid="5271803" data-ownerid="591282" data-score="1090" itemprop="acceptedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="5271803"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="1090">1090</div> <div class="js-accepted-answer-indicator grid--cell fc-green-500 py6 mtn8"><div class="ta-center"><svg aria-hidden="true" class="svg-icon iconCheckmarkLg" width="36" height="36" viewBox="0 0 36 36"><path d="m6 14 8 8L30 6v8L14 30l-8-8v-8z"></path></svg></div></div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>Just use <code>resize: none</code></p> <pre><code>textarea { resize: none; } </code></pre> <p>You can also decide to resize your textareas only horizontal or vertical, this way:</p> <p><code>textarea { resize: vertical; }</code></p> <p><code>textarea { resize: horizontal; }</code></p> <p>Finally, <code>resize: both</code> enables the resize grabber.</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited Mar 24 '14 at 10:48">edited Mar 24 '14 at 10:48</time> <a href="../../users/1126008/simon" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1126008.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Simon" /> </a> <div class="s-user-card--info"> <a href="../../users/1126008/simon" class="s-user-card--link">Simon</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">594</li> <li class="s-award-bling s-award-blinggold" title="2 gold badges">2</li> <li class="s-award-bling s-award-blingsilver" title="6 silver badges">6</li> <li class="s-award-bling s-award-blingbronze" title="25 bronze badges">25</li> </ul> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Mar 11 '11 at 10:35">answered Mar 11 '11 at 10:35</time> <a href="../../users/591282/anothershrubery" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/591282.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="anothershrubery" /> </a> <div class="s-user-card--info"> <a href="../../users/591282/anothershrubery" class="s-user-card--link">anothershrubery</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">20,461</li> <li class="s-award-bling s-award-blinggold" title="14 gold badges">14</li> <li class="s-award-bling s-award-blingsilver" title="53 silver badges">53</li> <li class="s-award-bling s-award-bling__bronze" title="98 bronze badges">98</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-5271803" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="5271803" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-24567736" class="comment js-comment " data-comment-id="24567736" data-comment-owner-id="591282" data-comment-score="31"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">31</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment24567736_5271803"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">IE doesn't allow resize of the text area therefore this will do the job as intended.</span> – <a href="../../users/591282/anothershrubery" title="20,461 reputation" class="comment-user ">anothershrubery</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/5271782/how-to-disable-the-resize-grabber-of-textarea#comment24567736_5271803"><span title="2013-06-08T19:07:41.867 License: CC BY-SA 3.0" class="relativetime-clean">Jun 08 '13 at 19:07</span></a></span> </div> </div> </li> <li id="comment-26862257" class="comment js-comment " data-comment-id="26862257" data-comment-owner-id="1282237" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment26862257_5271803"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@anothershrubery Likewise with iOS Safari, and I imagine the other mobile browsers.</span> – <a href="../../users/1282237/andrewb" title="5,200 reputation" class="comment-user ">andrewb</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/5271782/how-to-disable-the-resize-grabber-of-textarea#comment26862257_5271803"><span title="2013-08-19T05:17:37.270 License: CC BY-SA 3.0" class="relativetime-clean">Aug 19 '13 at 05:17</span></a></span> </div> </div> </li> <li id="comment-52926476" class="comment js-comment " data-comment-id="52926476" data-comment-owner-id="468603" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment52926476_5271803"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">For the textarea tag - In the CSS be sure NOT to specify a width AND while also having cols specificied in the textarea tag because you may have a "user agent stylesheet" issue.</span> – <a href="../../users/468603/xofo" title="1,256 reputation" class="comment-user ">Xofo</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/5271782/how-to-disable-the-resize-grabber-of-textarea#comment52926476_5271803"><span title="2015-09-12T01:32:36.637 License: CC BY-SA 3.0" class="relativetime-clean">Sep 12 '15 at 01:32</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="8041814"></a> <div id="answer-8041814" class="answer " data-answerid="8041814" data-ownerid="1034432" data-score="72" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="8041814"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="72">72</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><pre><code><textarea style="resize:none" name="name" cols="num" rows="num"></textarea> </code></pre> <p>Just an example </p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited Jun 24 '19 at 20:27">edited Jun 24 '19 at 20:27</time> <a href="../../users/3103891/galabra" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/3103891.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="GalAbra" /> </a> <div class="s-user-card--info"> <a href="../../users/3103891/galabra" class="s-user-card--link">GalAbra</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">5,048</li> <li class="s-award-bling s-award-blinggold" title="4 gold badges">4</li> <li class="s-award-bling s-award-blingsilver" title="23 silver badges">23</li> <li class="s-award-bling s-award-blingbronze" title="42 bronze badges">42</li> </ul> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Nov 07 '11 at 19:56">answered Nov 07 '11 at 19:56</time> <a href="../../users/1034432/tom" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1034432.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Tom" /> </a> <div class="s-user-card--info"> <a href="../../users/1034432/tom" class="s-user-card--link">Tom</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">729</li> <li class="s-award-bling s-award-blingsilver" title="5 silver badges">5</li> <li class="s-award-bling s-award-blingbronze" title="2 bronze badges">2</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <a name="19836484"></a> <div id="answer-19836484" class="answer " data-answerid="19836484" data-ownerid="2911239" data-score="12" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="19836484"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="12">12</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>example of textarea for disable the resize option </p> <pre><code><textarea CLASS="foo"></textarea> <style> textarea.foo { resize:none; } </style> </code></pre></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Nov 07 '13 at 12:51">answered Nov 07 '13 at 12:51</time> <a href="../../users/2911239/mikk-mikk" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/2911239.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="mikk mikk" /> </a> <div class="s-user-card--info"> <a href="../../users/2911239/mikk-mikk" class="s-user-card--link">mikk mikk</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">131</li> <li class="s-award-bling s-award-blingsilver" title="1 silver badges">1</li> <li class="s-award-bling s-award-blingbronze" title="2 bronze badges">2</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> </div> </div> <div id="sidebar" class="show-votes" role="complementary" aria-label="sidebar"> <div class="module sidebar-linked"> <h4 id="h-linked">Linked</h4> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">1</div></a> <a href="../../questions/36847482/html-textarea-tag-size-changing" class="question-hyperlink">HTML textarea tag size changing</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">3234</div></a> <a href="../../questions/5235142/how-do-i-disable-the-resizable-property-of-a-textarea" class="question-hyperlink">How do I disable the resizable property of a textarea?</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">0</div></a> <a href="../../questions/50624498/let-user-choose-how-many-lines-in-a-textarea-to-show-html-javascript" class="question-hyperlink">Let user choose how many lines in a textarea to show [HTML] [JAVASCRIPT?]</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">3</div></a> <a href="../../questions/53724760/angular-2-limit-textarea-value-in-columns-and-rows" class="question-hyperlink">Angular 2+ - Limit textarea value in columns and rows</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">2</div></a> <a href="../../questions/8139491/how-to-control-the-expandability-of-textarea-from-width-perspective" class="question-hyperlink">How to control the expandability of textarea from width perspective</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">39</div></a> <a href="../../questions/12767438/trying-to-remove-resizable-from-textarea" class="question-hyperlink">Trying to remove resizable from textarea</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">31</div></a> <a href="../../questions/15248804/how-to-create-a-fixed-size-twitter-bootstrap-text-area" class="question-hyperlink">How to create a fixed size twitter bootstrap text area</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">1</div></a> <a href="../../questions/21999009/disabling-resize-on-dijit-simple-text-area" class="question-hyperlink">Disabling resize on Dijit Simple Text Area?</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">1</div></a> <a href="../../questions/22291145/textarea-stretches-parent-div" class="question-hyperlink">Textarea stretches parent div</a> </div> </div> </div> <div class="module sidebar-linked"> <h4 id="h-linked">Related</h4> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">1</div></a> <a href="../../questions/36847482/html-textarea-tag-size-changing" class="question-hyperlink">HTML textarea tag size changing</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">39</div></a> <a href="../../questions/12767438/trying-to-remove-resizable-from-textarea" class="question-hyperlink">Trying to remove resizable from textarea</a> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>