WPForms样式代码

作者hoanwp

WPForms和Contact Form 7都是Wordpress优秀的表单插件，相对于Contact Form 7，WPForms可谓是后来居上，目前在Wordpress.org官网下载了超过了500万，并且好评远超Contact Form 7，WPForms是一款拖拽式表单，对新手十分友好，但是唯一的缺点就是生成的表单样式不完美。今天分享一些关于这款插件的css代码，可以让我们的表单更加好看。

WPForms Css样式

背景色，内边距，线条，圆角

.wpforms-form {
background-color: #eee !important;
padding: 20px 15px !important;
border: 3px solid #666 !important;
border-radius: 20px !important;
}

WPForms 提交按钮ButtonCss样式

/* New button styles */
.wpforms-form input[type=submit],
.wpforms-form button[type=submit] {
padding: 15px !important; /* Increase distance between text and border */
width: 30% !important; /* Make the button full-width */
font-size: 1em !important; /* Increase text size */
background-color: #af0000 !important; /* Red background */
color: #fff !important; /* White text */
border-radius: 25px !important;
}

WPForms 提交按钮ButtonCss Hover样式

/* New button hover styles */
.wpforms-form input[type=submit]:hover,
.wpforms-form input[type=submit]:active,
.wpforms-form button[type=submit]:hover,
.wpforms-form button[type=submit]:active,
.wpforms-form .wpforms-page-button:hover,
.wpforms-form .wpforms-page-button:active {
background-color: #860b0b !important; /* Dark red background */

}

WPForms 表单filed样式

div.wpforms-container-full .wpforms-form input[type=date], div.wpforms-container-full .wpforms-form input[type=datetime], div.wpforms-container-full .wpforms-form input[type=datetime-local], div.wpforms-container-full .wpforms-form input[type=email], div.wpforms-container-full .wpforms-form input[type=month], div.wpforms-container-full .wpforms-form input[type=number], div.wpforms-container-full .wpforms-form input[type=password], div.wpforms-container-full .wpforms-form input[type=range], div.wpforms-container-full .wpforms-form input[type=search], div.wpforms-container-full .wpforms-form input[type=tel], div.wpforms-container-full .wpforms-form input[type=text], div.wpforms-container-full .wpforms-form input[type=time], div.wpforms-container-full .wpforms-form input[type=url], div.wpforms-container-full .wpforms-form input[type=week], div.wpforms-container-full .wpforms-form select, div.wpforms-container-full .wpforms-form textarea {
background-color: #fff;
box-sizing: border-box;
border-radius: 2px;
color: #333;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
display: block;
float: none;
font-size: 18px;
font-family: inherit;
border: 1px solid #ccc;
padding: 22px 10px;
height: 38px;
width: 100%;
line-height: 1.3;
}

类似文章