如何禁用 textarea 的可调整大小的属性? [英] How do I disable the resizable property of a textarea?

问题描述

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

I want to disable the resizable property of a textarea.

目前，我可以通过单击 textarea 的右下角并拖动鼠标来调整 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?

推荐答案

以下 CSS 规则禁用了 textarea 元素:

The following CSS rule disables resizing behavior for textarea elements:

textarea {
  resize: none;
}

要为某些(但不是全部)textarea禁用它，有一个 几个选项.

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

您可以在标签中使用 class 属性(<textarea class="textarea1>):

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

.textarea1 {
  resize: none;
}

禁用特定的 textarea 并将 name 属性设置为 foo(即，):<em class="showen"></em></p> <p class="en">To disable a specific <code>textarea</code> with the <code>name</code> attribute set to <code>foo</code> (i.e., <code><textarea name="foo"></textarea></code>):</p> <pre><code><code>textarea[name=foo] { resize: none; } </code></code></pre> <p class="cn">或者，使用 <code>id</code> 属性(即，<code><textarea id=foo">):

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

#foo {
  resize: none;
}

W3C 页面列出了调整大小限制的可能值:无，两者都有、水平、垂直和继承:

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 */
}

查看一个不错的兼容性页面，了解当前支持此功能的浏览器.正如 Jon Hulka 所评论的，尺寸可以在 CSS 中使用 max-width、max-height、进一步限制，最小宽度和最小高度.

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;

引用 Sara Cope，http://css-tricks.com/almanac/properties/r/resize/

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

这篇关于如何禁用 textarea 的可调整大小的属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！