姓名：

邮箱：

密码：

第二节：CSS美化表单文本框

接下来，我们使用CSS对表单文本框进行美化，使其看起来更加漂亮和吸引人。在同级目录下新建一个名为`style.css`的CSS文件，并编写如下代码：

```css

body {

background-color: #f0f0f0;

padding: 30px;

font-family: '宋体', sans-serif;

}

form {

background-color: #fff;

padding: 20px;

border-radius: 5px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}

label {

display: block;

margin-bottom: 10px;

font-weight: bold;

}

input[type="text"], input[type="email"], input[type="password"] {

width: 100%;

padding: 10px;

border: none;

border-radius: 5px;

box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);

margin-bottom: 10px;

}

input[type="submit"] {

background-color: #007bff;

color: #fff;

padding: 10px 20px;

border: none;

border-radius: 5px;

cursor: pointer;

font-size: 16px;

}

input[type="submit"]:hover {

background-color: #0056b3;

}

```

这段代码主要对表单的样式进行了定义，包括背景颜色、边框、字体、间距等。我们通过选择器`input[type="text"]`、`input[type="email"]`和`input[type="password"]`来对不同类型的文本框进行样式设置。

第三节：添加额外效果

为了让我们的表单文本框更加有趣，我们可以进一步添加一些额外的效果。比如，在用户输入时，让文本框边框变色或者显示一些简短的提示文字。

```css

input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus {

border-color: #007bff;

}

input[type="text"]:hover, input[type="email"]:hover, input[type="password"]:hover {

border-color: #b3d7ff;

}

input[type="text"]:required:invalid, input[type="email"]:required:invalid, input[type="password"]:required:invalid {

border-color: #dc3545;

}

input[type="text"]:required:invalid::placeholder, input[type="email"]:required:invalid::placeholder, input[type="password"]:required:invalid::placeholder {

color: #dc3545;

}

```

以上代码中，我们使用了`:focus`和`:hover`伪类选择器来定义文本框在获得焦点或悬停时的样式。同时，我们还使用了`:required:invalid`伪类选择器和`::placeholder`伪元素选择器，来定义当文本框内容为空或者格式不正确时的样式。

第四节：呈现最终效果

好了，让我们来看看我们所制作的表单文本框最终效果吧！在浏览器中打开你的HTML文件，填写一些内容在文本框中，然后点击提交按钮。

你会发现，我们的表单文本框风格非常漂亮，并具有一些额外的效果。无论是简单的外观设计，还是实用的交互特性，都能让用户对我们的网页产生更好的体验。

结语：

通过本篇文章，我们学习了如何使用HTML和CSS制作出不同风格、具有各种特色的表单文本框。希望这里所展示的技巧和方法能够给你带来灵感，让你的网页设计更加出色。让我们一起不断学习、不断创新，打造更加精彩的网页吧！ 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.ynyuzhu.com/