css样式炫酷表单

在网页设计中，表单是不可或缺的元素之一。为了让表单更加美观和易于使用，我们可以使用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样式在网页设计中扮演着重要的角色，通过合理的运用，可以让表单更加美观、易于使用和人性化。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！