如何使用 CSS 禁用文本框的可调整大小属性?

cssweb developmentfront end technology更新于 2024/7/3 7:40:17

在 CSS 中，我们可以使用 'resize' 属性来调整网页文本框的大小。我们可以调整文本框的高度和宽度。如果将 resize 值设置为 None，文本框将不会调整大小。

在某些情况下，如果我们希望限制用户交互并控制输入的布局，可以在 HTML 中禁用文本框的可调整大小功能。文本输入的大小对于网页或应用程序的设计至关重要，布局也至关重要。

在本文中，我们将创建一段 CSS 代码来禁用文本区域的可调整大小属性。

可调整大小和不可调整大小的文本区域框的可视化表示

语法

<textarea>…写点什么…</textarea>

文本区域元素会在输出中创建一个框，用户可以在其中输入内容。"文本区域"是指在固定字体大小内容纳大量字符。文本框可用于表示反馈或评论框。

使用的属性

示例中使用的属性如下:-

color - 定义文本的颜色。
font-weight - 定义文本的粗细。
text-align - 定义文本的水平对齐方式。
overflow - 定义元素框的内容溢出，由 overflow 属性指定。如果元素内容过大，超出定义区域，此属性指示是否裁剪内容或添加滚动条。
height − 定义文本区域的高度。
weight − 定义文本区域的大小。
resize − 如果将值设置为 both，则将同时调整文本区域的高度和大小。如果将值设置为 none，则不会调整文本区域的大小。

示例

在此示例中，我们将使用内部 CSS 设计 h1 和 h3 元素。然后借助名为 resizable 的 id 类设置文本区域框的属性。如果将 resize 属性的值设置为 none，则将禁用文本区域框。

<!DOCTYPE html>
<html>
<title>Resize the textarea box</title>
<head>
   <style>
      h1,h3{
         color: darkgreen;
         font-weight: bold;
         text-align: center;
      }
      #resizable{
         overflow: auto;
         height: 200px;
         weight: 220px;
         resize: none;
      }
   </style>
</head>
<body>
   <h1>Tutorialspoint</h1>
   <h3><mark>Disable the resizable property of CSS</mark></h3>
   <center>
      <textarea id="resizable">This is real time to learn the technical course</textarea>
   </center>
</body>
</html>