题 如何禁用textarea的resizable属性?


我想禁用一个可调整大小的属性 textarea

目前,我可以调整大小 textarea 点击右下角的 textarea 并拖动鼠标。我怎么能禁用它?


2162
2018-03-08 16:15


起源


@JDIsaacks。我不同意。这就像是说让用户从文本框和按钮中删除自定义样式非常容易。这是我的网站,这是我的设计。我不希望它看起来像windows / mac / etc,我希望它看起来像我的应用程序/网站。 - Paul Fleming
@JDIsaaks - 此外,允许在某些情况下调整大小可能会破坏布局和原理(当前任务关键型项目的一个重要方面)。 - cale_b
有时你真的想要一个不可调整大小的textarea。例如,在这种情况下,当您(有条件地)将textarea转换为看起来像标签的东西时。如果标签上有一个随机浮动抓取器,那么看起来真的很奇怪。 - neminem
@Gherman在我看来,软件设计是最高水平的艺术形式之一,你的书籍类比没有任何意义。 - quemeful


答案:


以下CSS规则禁用了大小调整行为 textarea 内容:

textarea {
  resize: none;
}

为某些(但不是全部)禁用它 textareas,有一个 几个选项

禁用特定的 textarea 随着 name 属性设置为 foo (即, <textarea name="foo"></textarea>):

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

或者,使用 id 属性(即, <textarea id="foo"></textarea>):

#foo {
  resize: none;
}

W3C页面 列出调整大小限制的可能值:none,both,horizo​​ntal,vertical和inherit:

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

回顾一个体面的 兼容性页面 查看当前支持此功能的浏览器。正如Jon Hulka评论的那样,维度可以是 进一步克制 在CSS中使用max-width,max-height,min-width和min-height。

知道非常重要:

除非overflow属性不是可见的,否则此属性不执行任何操作,这是大多数元素的默认属性。所以一般来说,使用它,你必须设置像overflow:scroll;

引用Chris Coyier,    http://css-tricks.com/almanac/properties/r/resize/


2872
2018-03-08 16:17



是否有Firefox,Opera和/或IE的解决方案? - Šime Vidas
@ŠimeIE和FF3(及更早版本)不添加支持调整大小,因此不需要为它们提供解决方案。对于FF4,此解决方案应该可行。 - Donut
按照 davidwalsh.name/textarea-resize  - 使用resize:vertical或resize:horizo​​ntal来约束调整大小到一个维度。或使用max-width,max-height,min-width和min-height中的任何一个。 - Jon Hulka
我是唯一一个发现使用css而不是属性来设置它的人吗?为什么我不能使用CSS设置禁用或检查或其他属性... - Buksy
@Buksy因为“禁用”是一个状态,而不是一个视觉属性。因此,它不应该由a决定是合乎逻辑的 造型 语言。 - Kroltan


在CSS ...

textarea {
    resize: none;
}

174
2018-03-08 16:17



我个人更喜欢这个答案。到了这一点。 - quemeful


我发现了两件事

第一

textarea{resize:none}

这是一个css3 还没有发布 兼容 Firefox4 + chrome和safari 

另一种格式功能是 溢出:汽车 摆脱正确的滚动条考虑到 DIR 属性

代码和不同的浏览器

基本的HTML

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

一些浏览器

  • IE8

enter image description here

  • FF 17.0.1

enter image description here

enter image description here


91
2017-12-27 20:58





CSS3有一个新的UI元素属性,可以让你这样做。该物业是 调整财产大小。因此,您需要将以下内容添加到样式表中以禁用所有textarea元素的大小调整:

textarea { resize: none; }

这是一个CSS3属性;用一个 兼容性图表 看看浏览器兼容性。

就个人而言,我觉得在textarea元素上禁用resize非常烦人。这是设计师试图“打破”用户客户端的情况之一。如果您的设计无法容纳更大的文本区域,您可能需要重新考虑设计的工作方式。任何用户都可以添加 textarea { resize: both !important; } 到他们的用户样式表来覆盖您的偏好。


57
2018-03-08 16:35





<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>

19
2017-11-06 09:19





如果您需要深度支持,您可以使用旧式技术

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;
}

18
2018-02-12 12:14



也用 resize:none 用这个解决方案来防止手柄出现在底角,这令人沮丧地不起作用。 - MacroMan


这可以在html中轻松完成

<textarea name="textinput" draggable="false"></textarea>

这对我有用。默认值是 true 对于 draggable 属性。


9
2017-07-21 05:18



这是HTML 5属性,因此只有较新的浏览器才支持。我读过IE从9开始支持它的地方。 - Antony D'Andrea
这适用于大多数浏览器。在每个最新的浏览器。 - Thusitha Wickramasinghe
它不会阻止textarea重新调整大小 - Mishko Vladimir


你只需使用: resize: none; 在你的CSS中。

调整 property指定元素是否可调整大小   由用户。

注意: resize属性适用于计算溢出的元素   价值不是“可见的”。

调整 IE目前不支持。

以下是调整大小的不同属性:

没有调整大小:

textarea { 
  resize: none; 
}

调整两种方式(垂直和水平):

textarea { 
  resize: both; 
}

垂直调整大小:

textarea { 
  resize: vertical; 
}

水平调整大小:

textarea { 
  resize: horizontal; 
}

如果你有的话 width 和 height 在您的CSS或HTML中,它将阻止您的textarea调整大小,具有更广泛的浏览器支持。


4
2018-06-01 13:11





要禁用resize属性,请使用以下CSS属性:

resize: none;
  • 您可以将其应用为内联样式属性,如下所示:

    <textarea style="resize: none;"></textarea>
    
  • 或者在两者之间 <style>...</style> 元素标签如下:

    textarea {
        resize: none;
    }
    

4
2018-06-12 10:43





CSS3可以解决这个问题。不幸的是,它只支持 60%的浏览器使用率 如今。

对于IE和iOS,您无法关闭调整大小,但您可以限制 textarea 通过设置它的尺寸 width 和 height

/* One can also turn on/off specific axis. Defaults to both on. */
textarea { resize:vertical; } /* none|horizontal|vertical|both */

见演示


2
2017-10-30 23:26





添加!important使其有效:

width:325px !important; height:120px !important; outline:none !important;

大纲只是为了避免某些浏览器上的蓝色轮廓


0
2018-02-03 19:07



不要滥用 !important 属性。如果CSS属性没有意义修复宽度和高度 resize: none 可以删除调整大小功能 - Raptor