style - html引用css




如何禁用textarea的resizable属性? (11)

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

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

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

见演示

我想禁用textarea的resizable属性。

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


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

textarea { resize: none; }

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

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


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

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

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

此刻,IE中也不支持调整大小

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

没有调整大小:

textarea { 
  resize: none; 
}

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

textarea { 
  resize: both; 
}

垂直调整大小:

textarea { 
  resize: vertical; 
}

水平调整大小:

textarea { 
  resize: horizontal; 
}

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


使用@style ,您可以为其指定自定义大小并禁用调整大小功能(resize: none;)

@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })

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

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

您也可以尝试使用jQuery

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

我发现了两件事

第一

textarea{resize:none}

这是一个css3 ,尚未发布,但Firefox4 + chrome和safari兼容

另一种格式功能是overflow:auto去除右侧滚动条考虑到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


添加!important使其有效:

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

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


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

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

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

    textarea {
        resize: none;
    }
    

试试这个:

#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>


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






css