css3制作表单代码

CSS3制作表单代码

CSS3在表单设计上提供了更多的样式选择和定制性，可以让表单不再单调无味。下面我们来分享一份CSS3制作表单的代码。

form{
    width: 300px;
    margin: 0 auto;
}
input{
    padding: 10px;
    border-radius: 5px;
    border: none;
    outline: none;
    font-size: 16px;
}
input[type="text"], input[type="password"], input[type="email"]{
    width: 100%;
    margin-bottom: 20px;
    background-color: #f2f2f2;
}
input[type="submit"]{
    background-color: #1abc9c;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}
input[type="submit"]:hover{
    background-color: #16a085;
}
    

以上是一个简单的表单样式代码。其中，我们使用了CSS3的圆角和渐变效果，通过:hover伪类实现了按钮的颜色变化，提升了交互体验。制作表单时，还需注意一些细节问题，比如输入框的大小、文字的大小、行高、边距等等，这些都是可以根据实际情况进行自定义设置的。

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