Textarea CSS

在本文中，我们将学习文本域 CSS。首先，让我们了解文本域。

文本域

“textarea” 是一个 HTML 元素，用于在表单中创建一个多行文本输入区域。

语法

在上面的语法中，<textarea> 是开始标签，</textarea> 是结束标签。“rows” 和 “cols” 是定义文本域大小的属性。“rows”属性定义行数，“cols”属性指定列数。

<textarea> 元素的使用

它允许用户输入大量文本。它在许多地方使用，如下所示：

• 消息框： 用于创建消息框，用户可以在其中编写和发送长消息。
• 评论和反馈： 用于创建评论和反馈表单，以便用户可以输入评论和反馈。
• 地址字段： 用于表单中创建地址字段，以便用户可以输入多行地址。
• 描述框： 用于创建描述框，以详细描述某事。

<textarea> 元素演示

在本演示中，我们将使用 <textarea> 标签来创建文本域。

代码

输出

这是我们可以看到文本域的输出。

现在我们将学习文本域 CSS。

使用 CSS 的文本域

文本域 CSS 意味着为 <textarea> 元素添加样式。我们可以使用 CSS (层叠样式表) 为 <textarea> 元素应用样式，使其更具吸引力。我们可以使用 CSS 属性来更改 <textarea> 元素的视觉外观。

文本域 CSS 的示例

我们将通过示例来学习如何创建样式化的文本域。

插图 1

在此示例中，我们将为 <textarea> 元素设置样式。我们将使用以下 CSS 属性来设置 <textarea> 元素的样式，包括 font-family、font-size、padding、border、border-radius 和 box-shadow。

代码

输出

这是结果，我们可以看到看起来很时尚的文本域。

插图 2

我们将创建一个包含 <textarea> 元素的学生注册表，我们将使用 CSS 为其设置样式。

代码

输出

我们可以看到一个使用 CSS 属性进行样式设置的包含 <textarea> 元素的学生注册表。

插图 3

我们将创建一个包含 <textarea> 元素的联系我们表单，该表单将使用 CSS 进行样式设置。

代码

输出

我们可以看到带有使用 CSS 属性设置了样式的文本域的联系我们表单。

插图 4

我们将创建一个包含 <textarea> 元素的评论和反馈表单，我们将使用 CSS 为其设置样式。

代码

输出

我们可以看到带有使用 CSS 属性在表单上提供样式的评论和反馈表单。

浏览器支持

以下是支持 <textarea> 元素的 Web 浏览器

• 谷歌浏览器
• Safari
• Internet Explorer
• Opera
• Microsoft Edge
• 火狐

结论

通过示例，我们学习了文本域 CSS。我们学习了如何使用 <textarea> 标签在网页上创建文本域，然后学习了如何将 CSS 应用于 <textarea> 元素。