[分享]css样式炫酷表单

在网页设计中，表单是不可或缺的元素之一。为了让表单更加美观和易于使用，我们可以使用CSS样式来增强它的外观和功能。/ 为表单添加样式 / form { backgroundcolor: fff; bo...

在网页设计中，表单是不可或缺的元素之一。为了让表单更加美观和易于使用，我们可以使用CSS样式来增强它的外观和功能。

/* 为表单添加样式 */
form {
background-color: #fff;
border: 2px solid #ddd;
padding: 20px;
border-radius: 10px;
}
/* 标题样式 */
h2 {
color: #333;
font-size: 26px;
text-align: center;
margin-top: 0;
}
/* 表单输入框样式 */
input[type=text], input[type=email] {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
}
/* 鼠标悬停时的输入框样式 */
input[type=text]:hover, input[type=email]:hover {
border-color: #009688;
}
/* 表单提交按钮样式 */
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
/* 鼠标悬停时的提交按钮样式 */
input[type=submit]:hover {
background-color: #009688;
}

通过上述CSS代码，我们可以为表单添加背景颜色、圆角边框、标题样式和输入框样式等。同时，我们还可以增加鼠标悬停时的样式效果，提高用户体验。

总之，CSS样式在网页设计中扮演着重要的角色，通过合理的运用，可以让表单更加美观、易于使用和人性化。

江苏,常州,武进区