提问



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


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

最佳参考


以下CSS规则禁用textarea元素的大小调整行为:[55]


textarea {
  resize: none;
}


要为某些(但不是全部)textarea禁用它,有几个选项。[56]


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


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


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


#foo {
  resize: none;
}


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


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


查看合适的兼容性页面,了解当前支持此功能的浏览器。正如Jon Hulka评论的那样,使用max-width,max-height,min-width和min-height可以进一步限制CSS的尺寸。[58] [59]



  

知道非常重要:


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

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


其它参考1


在CSS ...


textarea {
    resize: none;
}

其它参考2


我发现了两件事


第一


textarea{resize:none}


这是一个尚未发布的css3 与 Firefox4 + chrome和safari [61]兼容


另一种格式功能是溢出:自动以摆脱考虑 dir 属性[62] [63]的右滚动条


代码和不同的浏览器



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







  • chrome





其它参考3


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


textarea { resize: none; }


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


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

其它参考4


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

其它参考5


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


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

其它参考6


这可以在html中轻松完成


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


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

其它参考7


您只需在CSS中使用:resize: none;



   resize 属性指定元素是否可调整大小
  由用户。

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



此时IE中也不支持调整大小


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


没有调整大小:


textarea { 
  resize: none; 
}


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


textarea { 
  resize: both; 
}


垂直调整大小


textarea { 
  resize: vertical; 
}


水平调整大小:


textarea { 
  resize: horizontal; 
}


此外,如果您的CSS或HTML中有widthheight,它将阻止您的textarea调整大小,并支持更广泛的浏览器。

其它参考8


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


resize: none;



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


    <textarea style="resize: none;"></textarea>
    

  • <style>...</style>之间的元素标签如下:


    textarea {
        resize: none;
    }
    


其它参考9


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


对于IE和iOS,您无法关闭调整大小,但可以通过设置widthheight来限制textarea维度。


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


见演示[67]

其它参考10


添加!important使其有效:


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


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

其它参考11


禁用所有textarea的调整大小


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

其它参考12


你可以像这样简单地禁用textarea 属性:


textarea{
    resize: none;
}


要禁用垂直水平调整大小,请使用


resize: vertical;


要么


resize: horizontal;

其它参考13


尝试这个:




#foo {
    resize: none;
}

<textarea rows="4" cols="50" name="foo" id="foo">
Minisoft is the best Website and Software Development company providing various IT services to individual and corporate clients globally. http://minisoft.com.bd
</textarea>



您也可以尝试使用jQuery


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