发表新帖
发表新帖

How do I disable the resizable property of a textarea?

后端 未结
关注
18 1174
北荒
北荒 2020-11-22 09:56

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

相关标签:
18条回答
  • 夕颜
    2020-11-22 10:51

    If you need deep support, you can use an old school technique:

    textarea {
    max-width: /* desired fixed width */ px;
    min-width: /* desired fixed width */ px;
    min-height: /* desired fixed height */ px;
    max-height: /* desired fixed height */ px;
}
    0 讨论(0)
  • 渐次进展
    2020-11-22 10:52

    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 讨论(0)
  • 感情败类
    2020-11-22 10:52

    You simply use: resize: none; in your CSS.

    The resize property specifies whether or not an element is resizable by the user.

    Note: The resize property applies to elements whose computed overflow value is something other than "visible".

    Also resize not supported in Internet Explorer at the moment.

    Here are different properties for resize:

    No Resize:

    textarea {
  resize: none;
}

    Resize both ways (vertically & horizontally):

    textarea {
  resize: both;
}

    Resize vertically:

    textarea {
  resize: vertical;
}

    Resize horizontally:

    textarea {
  resize: horizontal;
}

    Also if you have width and height in your CSS or HTML, it will prevent your textarea be resized, with a broader browsers support.

    0 讨论(0)
  • 醉话见心
    2020-11-22 10:52

    You can try with jQuery also

    $('textarea').css("resize", "none");
    0 讨论(0)
  • 耶瑟儿～
    2020-11-22 10:56

    In CSS ...

    textarea {
    resize: none;
}
    0 讨论(0)
  • 南笙
    2020-11-22 10:56 
    <textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>
    0 讨论(0)
 看不清?
提交回复
热议问题