Categories
css html

How do I disable the resizable property of a textarea?

3093

I want to disable the resizable property of a textarea.

Currently, I can resize a textarea by clicking on the bottom right corner of the textarea and dragging the mouse. How can I disable this?

Enter image description here

3

  • 5

    @JDIsaaks – further, allowing resize in certain situations can break layout and printabilit (an important aspect of a current mission-critical project).

    Nov 23, 2012 at 19:35

  • 16

    Sometimes you really do want a non-resizeable textarea. For instance, in this case, when you’re (conditionally) converting a textarea into something that just looks like a label. It looks really odd to have a label with a random floating grabber way off to the side.

    – neminem

    Jan 21, 2015 at 17:20

  • 7

    For the love of all that is good, please don’t do this on an actual textarea or you will alienate your power users. Breaking core browser functionality should be considered a nuclear option.

    Jan 30, 2020 at 13:37

4107

The following CSS rule disables resizing behavior for textarea elements:

textarea {
  resize: none;
}

To disable it for some (but not all) textareas, there are a couple of options.

You can use class attribute in your tag(<textarea class="textarea1">):

.textarea1 {
  resize: none;
}

To disable a specific textarea with the name attribute set to foo (i.e., <textarea name="foo"></textarea>):

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

Or, using an id attribute (i.e., <textarea id="foo"></textarea>):

#foo {
  resize: none;
}

The W3C page lists possible values for resizing restrictions: none, both, horizontal, vertical, and inherit:

textarea {
  resize: vertical; /* user can resize vertically, but width is fixed */
}

Review a decent compatibility page to see what browsers currently support this feature. As Jon Hulka has commented, the dimensions can be further restrained in CSS using max-width, max-height, min-width, and min-height.

Super important to know:

This property does nothing unless the overflow property is something other than visible, which is the default for most elements. So generally to use this, you’ll have to set something like overflow: scroll;

Quote by Sara Cope,
http://css-tricks.com/almanac/properties/r/resize/

6

  • Is there a solution for Firefox, Opera and/or IE?

    Mar 8, 2011 at 16:31

  • 8

    @Šime IE and FF3 (and earlier) do not add support resizing, so a solution for them is not needed. For FF4, this solution should work.

    – Donut

    Mar 8, 2011 at 16:37

  • 32

    as per davidwalsh.name/textarea-resize – use resize:vertical or resize:horizontal to constrain resizing to one dimension. Or use any of max-width, max-height, min-width and min-height.

    – Jon Hulka

    Nov 17, 2012 at 20:23

  • 6

    Am I the only one who finds it weird to set this using css and not attributes? Why can’t I then set disabled or checked or other properties using CSS …

    – Buksy

    Aug 8, 2016 at 13:15

  • 9

    @Buksy Because “disabled” is a state, not a visual property. Thus it’s logical that it shouldn’t be decided by a styling language.

    – Kroltan

    Sep 8, 2016 at 13:01


238

In CSS …

textarea {
    resize: none;
}

0

    129

    I found two things:

    First

    textarea{resize: none}
    

    This is a CSS 3, which is not released yet, compatible with Firefox 4 (and later), Chrome, and Safari.

    Another format feature is to overflow: auto to get rid of the right scrollbar, taking into account the dir attribute.

    Code and different browsers

    Basic HTML

    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
        <textarea style="overflow:auto;resize:none" rows="13" cols="20"></textarea>
    </body>
    </html>
    

    Some browsers

    • Internet Explorer 8

    Enter image description here

    • Firefox 17.0.1

    Enter image description here

    • Chrome

    Enter image description here

    0