Disabling the Resize Grabber of </strong></p> <p>How to remove that annoying resize grabber from your <textarea> element?</p> <p><strong>Disabling the Grabber</strong></p> <p>To disable the resize grabber, simply use the <strong>resize: none</strong> property:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><code class="css">textarea { resize: none; }</code></pre><div class="contentsignin">Copy after login</div></div> <p>This will completely remove the grabber from the <textarea>.</p> <p><strong>Resizing Horizontally or Vertically</strong></p> <p>If you want to allow resizing only horizontally or vertically, you can use the following properties:</p> <ul> <li> <strong>resize: vertical:</strong> Resizes the <textarea> vertically only.</li> <li> <strong>resize: horizontal:</strong> Resizes the <textarea> horizontally only.</li> </ul> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><code class="css">textarea { resize: vertical; } textarea { resize: horizontal; }</code></pre><div class="contentsignin">Copy after login</div></div> <p><strong>Enabling the Grabber</strong></p> <p>If you want to enable the resize grabber, use the <strong>resize: both</strong> property:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><code class="css">textarea { resize: both; }</code></pre><div class="contentsignin">Copy after login</div></div>
