CSS textarea激活态, 失焦状态

在网页开发中，文本域（textarea）是常用的表单元素之一，用于用户输入多行文本。在设计网页表单时，美化文本域的样式可以提升用户体验。在这篇文章中，我将详细介绍如何使用CSS样式来美化文本域的激活态和失焦状态。

激活态

激活态指的是用户点击文本域并开始输入文本时的状态。我们可以通过CSS样式改变文本域的边框、背景色等属性来美化激活态。

首先，我们创建一个HTML文件，包含一个文本域元素：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Textarea激活态</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<textarea></textarea>
</body>
</html>

接下来，在同一目录下创建一个CSS文件styles.css，添加以下样式：

textarea {
    width: 300px;
    height: 200px;
    padding: 10px;
    border: 1px solid #ccc;
    transition: border-color 0.3s;
}

textarea:focus {
    border-color: #007bff;
}

上面的样式代码中，我们对文本域元素设置了一些基本样式，如宽度、高度、内边距、边框等。通过:focus伪类选择器，可以为文本域的激活态添加样式，这里我们将文本域的边框颜色改变为蓝色。

保存修改后的CSS文件和HTML文件，用浏览器打开HTML文件，点击文本域即可看到激活态的效果。

失焦状态

失焦状态指的是用户点击文本域输入文本后，再点击其他地方使文本域失去焦点时的状态。我们可以通过CSS样式改变文本域的边框、背景色等属性来美化失焦状态。

继续使用上面的HTML文件，修改CSS样式如下：

textarea {
    width: 300px;
    height: 200px;
    padding: 10px;
    border: 1px solid #ccc;
    transition: border-color 0.3s;
}

textarea:focus {
    border-color: #007bff;
}

textarea:active {
    border-color: #28a745;
}

在上面的样式代码中，我们利用:active伪类选择器来为文本域的失焦状态添加样式，这里将文本域的边框颜色改变为绿色。保存修改后的CSS文件和HTML文件，用浏览器打开HTML文件，点击文本域并输入文本，再点击其他地方使文本域失去焦点即可看到失焦状态的效果。

通过以上介绍，我们可以通过CSS样式来美化文本域的激活态和失焦状态，提升用户体验。