Don*_*nut 3373
以下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网页列出了可能的值调整限制:无,两,水平,垂直,并且继承:
textarea {
resize: vertical; /* user can resize vertically, but width is fixed */
}
查看合适的兼容性页面,了解当前支持此功能的浏览器.正如Jon Hulka评论的那样,使用max-width,max-height,min-width和min-height 可以进一步限制 CSS 的尺寸.
知道非常重要:
除非overflow属性不是可见的,否则此属性不执行任何操作,这是大多数元素的默认属性.所以一般来说,使用它,你必须设置像overflow:scroll;
引自Chris Coyier,http: //css-tricks.com/almanac/properties/r/resize/
- 根据http://davidwalsh.name/textarea-resize - 使用resize:vertical或resize:horizontal来约束调整大小到一个维度.或使用max-width,max-height,min-width和min-height中的任何一个. (24认同)
- @ŠimeIE和FF3(及更早版本)不添加支持调整大小,因此不需要为它们提供解决方案.对于FF4,此解决方案应该可行. (6认同)
- @Buksy因为"禁用"是一个状态,而不是一个视觉属性.因此,它不应该由*样式*语言决定是合乎逻辑的. (6认同)
- 我是唯一一个发现使用css而不是属性来设置它的人吗？为什么我不能使用CSS设置禁用或检查或其他属性... (3认同)
Ram*_*leh 102
我发现了两件事
第一
textarea{resize: none}
这是一个css3 ,尚未发布,但与Firefox4 + chrome和safari兼容
代码和不同的浏览器
基本的HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<textarea style="overflow:auto;resize:none" rows="13" cols="20"></textarea>
</body>
</html>
一些浏览器
- IE8
- FF 17.0.1
- 铬
Jam*_*ers 62
CSS3有一个新的UI元素属性,可以让你这样做.该属性是resize属性.因此,您需要在样式表中添加以下内容以禁用所有textarea元素的大小调整:
textarea { resize: none; }
这是一个CSS3属性; 使用兼容性图表查看浏览器兼容性.
就个人而言,我觉得在textarea元素上禁用resize非常烦人.这是设计师试图"打破"用户客户端的情况之一.如果您的设计无法容纳更大的文本区域,您可能需要重新考虑设计的工作方式.任何用户都可以添加textarea { resize: both !important; }到用户样式表中以覆盖您的偏好.
小智 22
<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>
yev*_*niy 20
如果您需要深度支持,您可以使用旧式技术
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;
}
- 也可以使用`resize:none`这个解决方案,以防止出现在底角的手柄,令人沮丧地无法工作. (7认同)
Thu*_*ghe 13
这可以在html中轻松完成
<textarea name="textinput" draggable="false"></textarea>
这适合我.默认值是true为draggable属性.
- 这适用于大多数浏览器.在每个最新的浏览器. (3认同)
- @AntonyD'Andrea 这不适用于最新的 Chrome：https://jsfiddle.net/ps2v8df9/ (3认同)
小智 10
您需要在您的中设置以下CSS代码component.css
textarea {
resize: none;
}
textarea {
resize: none;
}
上面的代码将禁用<textarea/>项目中所有元素的可调整大小属性。如果您希望这样就可以了，否则您可能希望为您的文本区域元素使用特定的类。
.not-resizable {
resize: none;
}
在你的 HTML 中
<textarea class="not-resizable"></textarea>
要禁用所有textareas 的调整大小：
textarea {
resize: none;
}
要禁用特定 的调整大小textarea，请添加属性name或id并将其设置为某项。在本例中，它被命名为noresize
超文本标记语言
<textarea name='noresize' id='noresize'> </textarea>
CSS
/* Using the attribute name */
textarea[name=noresize] {
resize: none;
}
/* Or using the id */
#noresize {
resize: none;
}
小智 7
您可以像这样简单地禁用 textarea属性：
textarea {
resize: none;
}
要禁用垂直或水平调整大小，请使用
resize: vertical;
或者
resize: horizontal;
小智 7
您可以使用textarea {resize: none;}禁用 textarea 的 resizeable 属性
textarea {
resize: none;
}
要禁用resize属性，请使用以下CSS属性：
resize: none;
您可以将其用作内联样式属性，如下所示：
Run Code Online (Sandbox Code Playgroud)<textarea style="resize: none;"></textarea>或在
<style>...</style>元素标签之间，如下所示：
Run Code Online (Sandbox Code Playgroud)textarea { resize: none; }
您只需resize: none;在CSS中使用：。
的调整大小属性指定是否一个元件是由用户调整大小。
注意： resize属性适用于其计算出的溢出值不是“ visible”的元素。
同时调整大小不是现在在Internet Explorer中的支持。
以下是调整大小的不同属性：
不调整大小：
textarea {
resize: none;
}
双向调整大小（垂直和水平）：
textarea {
resize: both;
}
垂直调整大小：
textarea {
resize: vertical;
}
水平调整大小：
textarea {
resize: horizontal;
}
此外，如果你有width和height你的CSS或HTML，它会阻止你的文字区域进行调整，以更广泛的浏览器的支持。
我创建了一个小演示来展示调整属性大小的工作原理。我希望它对您和其他人也有帮助。
.resizeable {
resize: both;
}
.noResizeable {
resize: none;
}
.resizeable_V {
resize: vertical;
}
.resizeable_H {
resize: horizontal;
}<textarea class="resizeable" rows="5" cols="20" name="resizeable" title="This is Resizable.">
This is Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>
<textarea class="noResizeable" rows="5" title="This will not Resizable. " cols="20" name="resizeable">
This will not Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>
<textarea class="resizeable_V" title="This is Vertically Resizable." rows="5" cols="20" name="resizeable">
This is Vertically Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>
<textarea class="resizeable_H" title="This is Horizontally Resizable." rows="5" cols="20" name="resizeable">
This is Horizontally Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>CSS 3 可以解决这个问题。不幸的是，现在只有60% 的浏览器支持它。
对于 Internet Explorer 和 iOS，您无法关闭调整大小，但可以textarea通过设置其width和来限制尺寸height。
/* One can also turn on/off specific axis. Defaults to both on. */
textarea { resize:vertical; } /* none|horizontal|vertical|both */
| 归档时间： |
|
| 查看次数： |
1279407 次 |
| 最近记录： |