我想禁用 textarea
的可调整大小的属性。
目前,我可以通过单击 textarea
的右下角并拖动鼠标来调整 textarea
的大小。我怎样才能禁用它?
https://i.stack.imgur.com/xrfWQ.png
以下 CSS 规则禁用 textarea
元素的大小调整行为:
textarea {
resize: none;
}
要为某些(但不是全部)textarea
禁用它,有一个 couple of options。
您可以在标签 (<textarea class="textarea1">
) 中使用 class
属性:
.textarea1 {
resize: none;
}
要禁用将 name
属性设置为 foo
(即 <textarea name="foo"></textarea>
)的特定 textarea
:
textarea[name=foo] {
resize: none;
}
或者,使用 id
属性(即 <textarea id="foo"></textarea>
):
#foo {
resize: none;
}
W3C page 列出了调整大小限制的可能值:none、both、horizontal、vertical 和 inherit:
textarea {
resize: vertical; /* user can resize vertically, but width is fixed */
}
查看一个不错的 compatibility page 以了解当前支持此功能的浏览器。正如 Jon Hulka 评论的那样,尺寸可以在 CSS 中使用 max-width、max-height、min-width 和 min-height 为 further restrained。
非常重要的是要知道:这个属性什么都不做,除非溢出属性不是可见的,这是大多数元素的默认值。所以通常要使用它,你必须设置像溢出一样的东西:滚动; Sara Cope 引用,http://css-tricks.com/almanac/properties/r/resize/
在 CSS ...
textarea {
resize: none;
}
我发现了两件事:
第一的
textarea{resize: none}
这是一个 CSS 3,尚未发布,与 Firefox 4 (and later), Chrome, and Safari 兼容。
另一个格式特性是 overflow: auto
去掉右侧的滚动条,同时考虑到 dir 属性。
代码和不同的浏览器
基本 HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<textarea style="overflow:auto;resize:none" rows="13" cols="20"></textarea>
</body>
</html>
一些浏览器
互联网浏览器 8
https://i.stack.imgur.com/IObIu.png
火狐 17.0.1
https://i.stack.imgur.com/Xr3ub.png
铬合金
https://i.stack.imgur.com/VxYgY.png
CSS 3 为 UI 元素提供了一个新属性,可让您执行此操作。该属性是 resize property。因此,您将在样式表中添加以下内容以禁用所有 textarea 元素的大小调整:
textarea { resize: none; }
这是一个 CSS 3 属性;使用 compatibility chart 查看浏览器兼容性。
就个人而言,我会发现在 textarea 元素上禁用调整大小非常烦人。这是设计者试图“破坏”用户客户端的情况之一。如果您的设计无法容纳更大的文本区域,您可能需要重新考虑您的设计是如何工作的。任何用户都可以将 textarea { resize: both !important; }
添加到他们的用户样式表以覆盖您的偏好。
texarea
的大小并最终使某些东西不起作用
<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>
如果您需要深度支持,您可以使用老派技术:
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
一起使用,以防止手柄出现在底角,这令人沮丧地不起作用。
这可以很容易地在 HTML 中完成:
<textarea name="textinput" draggable="false"></textarea>
这对我有用。 draggable
属性的默认值为 true
。
您只需在 CSS 中使用:resize: none;
。
resize 属性指定元素是否可以由用户调整大小。注意:resize 属性适用于计算出的溢出值不是“可见”的元素。
目前 Internet Explorer 也不支持调整大小。
以下是调整大小的不同属性:
无调整大小:
textarea {
resize: none;
}
双向调整大小(垂直和水平):
textarea {
resize: both;
}
垂直调整大小:
textarea {
resize: vertical;
}
水平调整大小:
textarea {
resize: horizontal;
}
此外,如果您的 CSS 或 HTML 中有 width
和 height
,它将阻止您的 textarea 调整大小,并提供更广泛的浏览器支持。
要禁用调整大小属性,请使用以下 CSS 属性:
resize: none;
您可以将其作为内联样式属性应用,如下所示:
或在 元素标签之间,如下所示: textarea { resize: none; }
您可以像这样简单地禁用 textarea 属性:
textarea {
resize: none;
}
要禁用垂直或水平调整大小,请使用
resize: vertical;
或者
resize: horizontal;
使用此属性 resize: none;
textarea {
resize: none;
}
CSS 3 可以解决这个问题。不幸的是,它现在仅在 60% of used browsers 上受支持。
对于 Internet Explorer 和 iOS,您无法关闭调整大小,但您可以通过设置 width
和 height
来限制 textarea
维度。
/* One can also turn on/off specific axis. Defaults to both on. */
textarea { resize:vertical; } /* none|horizontal|vertical|both */
要为所有 textarea
禁用调整大小:
textarea {
resize: none;
}
要禁用特定 textarea
的调整大小,请添加属性 name
或 id
并将其设置为某些内容。在这种情况下,它被命名为 noresize
HTML
<textarea name='noresize' id='noresize'> </textarea>
CSS
/* Using the attribute name */
textarea[name=noresize] {
resize: none;
}
/* Or using the id */
#noresize {
resize: none;
}
我创建了一个小演示来展示调整大小属性的工作原理。我希望它也能帮助你和其他人。
.resizeable { 调整大小:两者; } .noResizeable { 调整大小:无; } .resizeable_V { 调整大小:垂直; } .resizeable_H { 调整大小:水平; }
textarea {
resize: none;
}
上面的代码将禁用项目中所有 <textarea/>
元素的 resizable 属性。如果你想要那很好,否则你会想要为你的 textarea 元素使用一个特定的类。
.not-resizable {
resize: none;
}
在您的 HTML 中
<textarea class="not-resizable"></textarea>
使用 @style
,您可以为其指定自定义大小并禁用调整大小功能 (resize: none;)
。
@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })
您也可以尝试使用 jQuery
$('textarea').css("resize", "none");
添加 !important
使其工作:
width:325px !important; height:120px !important; outline:none !important;
outline
只是为了避免在某些浏览器上出现蓝色轮廓。
!important
属性。固定宽度没有意义&如果 CSS 属性 resize: none
可以移除调整大小功能,则高度
!important
不是邪恶的吗?