如何禁用textarea的可resize的属性?

我想禁用textarea的可resize的属性。

目前,我可以通过点击textarea的右下angular并拖动鼠标来调整textarea的大小。 我怎样才能禁用这个?

以下CSS规则将禁用textarea元素的调整行为:

 textarea { resize: none; } 

要禁用一些(但不是全部) textarea ,有几个选项 。

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

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

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

 #foo { resize: none; } 

W3C页面列出了resize限制的可能值:none,none,horizo​​ntal,vertical和inherit:

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

查看一个体面的兼容性页面 ,查看目前支持该function的浏览器。 正如Jon Hulka评论的那样,在CSS中可以使用最大宽度,最大高度,最小宽度和最小高度进一步限制尺寸。

超级重要知道:

这个属性什么都不做,除非overflow属性是可见的,而这是大多数元素的默认属性。 所以一般使用这个,你必须设置一些像溢出:滚动;

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

在CSS中…

 textarea { resize: none; } 

我发现了两件事

第一

 textarea{resize:none} 

这是一个css3 ,这是不是Firefox4 +铬和Safari浏览器兼容

另一种格式function是溢出:自动去掉右侧滚动条,考虑到dir属性

代码和不同的浏览器

基本的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

在这里输入图像描述

在这里输入图像描述

CSS3有一个新的UI元素,可以让你做到这一点。 该属性是resize属性 。 所以你可以在样式表中添加以下内容来禁用所有textarea元素的大小调整:

 textarea { resize: none; } 

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

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

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

这可以在HTML中做到容易

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

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

伟大的问题! 要禁用resize属性,请使用以下CSS属性:

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

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

     textarea { resize: none; } 

增加!重要的使它工作:

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

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

CSS3可以解决这个问题。 不幸的是,现在只有60%的浏览器支持。

对于IE和iOS,您无法closuresresize,但是您可以通过设置其widthheight来限制textarea尺寸。

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

看演示

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

resize属性指定一个元素是否可以由用户resize。

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

此刻在IE中还不支持resize

以下是resize的不同属性:

不resize:

 textarea { resize: none; } 

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

 textarea { resize: both; } 

垂直resize:

 textarea { resize: vertical; } 

水平resize:

 textarea { resize: horizontal; } 

此外,如果您的CSS或HTML中有widthheight ,则会阻止您的textarea被resize,并提供更广泛的浏览器支持。

禁用所有textarea的resize

 textarea { resize: none; } 

禁用特定textarea大小调整添加属性nameid并将其设置为某些内容。 在这种情况下,它被命名为noresize

 <textarea name='noresize' id='noresize'> </textarea> 

CSS

 /* using the attribute name */ textarea[name=noresize]{ resize: none; } /* or using the id */ #noresize{ resize: none; } 

你可以做到这一点使用CSS resize属性。

 textarea { resize: none; } 

您也可以决定调整您的textarea的水平垂直 ,这样:

 textarea { resize: vertical; } textarea { resize: horizontal; } 

最后, resize: both可以resize的抓取器。

你也可以试试jQuery

 $('textarea').css("resize", "none");