css DIVI的重力形式样式[在子主题CSS文件中插入]

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css DIVI的重力形式样式[在子主题CSS文件中插入]相关的知识,希望对你有一定的参考价值。

/* ==========================================================================
   Gravity Forms Style for DIVI
   ========================================================================== */

/* Main Form Styles */
body .gform_wrapper h3.gform_title{
    font-size:26px;font-weight:500
    }

body .gform_wrapper .gform_footer,body .gform_wrapper .gform_page_footer{
    overflow:hidden;
    text-align:right
}

body .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),body .gform_wrapper textarea.textarea,body div.form_saved_message div.form_saved_message_emailform form input[type=text]{
    background-color:#eee;
    border:none;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    font-size:14px;
    color:#999;
    padding:16px;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    line-height:initial;
    height:initial
}

body .gform_wrapper select{
    display:inline-block;
    height:51px;
    font-size:14px;
    color:#999;
    background:#eee;
    border:none
}

body .gform_wrapper .gform_footer input.button,body .gform_wrapper .gform_footer input[type=submit],body .gform_wrapper .gform_page_footer input.button,body .gform_wrapper .gform_page_footer input[type=submit],body .gform_wrapper input[type=button],body div.form_saved_message div.form_saved_message_emailform form input[type=submit]{
    background:0 0;
    font-size:20px;
    font-weight:500;
    line-height:1.7em;
    font-family:inherit;
    color:inherit;
    margin:8px 0 0;
    padding:6px 20px;
    border:2px solid;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    -moz-transition:all .2s;
    -webkit-transition:all .2s;
    transition:all .2s
}

body div.form_saved_message div.form_saved_message_emailform form input[type=submit]{
    margin-left:auto;
    margin-right:auto
}

body .gform_wrapper .gform_footer input[type=submit],body .gform_wrapper .gform_page_footer .button.gform_button,body .gform_wrapper .gform_page_footer .button.gform_next_button{margin-right:0
}

body .gform_wrapper .gform_footer input.button:hover,body .gform_wrapper .gform_footer input[type=submit]:hover,body .gform_wrapper .gform_page_footer input.button:hover,body .gform_wrapper .gform_page_footer input[type=submit]:hover,body .gform_wrapper input[type=button]:hover,body div.form_saved_message div.form_saved_message_emailform form input[type=submit]:hover{
    cursor:pointer
}

body .gform_wrapper .gform_fileupload_multifile input[type=button]{
    font-size:14px
}

body .gform_wrapper li.gfield.gfield_error.gfield_contains_required{
    margin-top:0;
    margin-bottom:0!important
}

body .gform_wrapper li.gfield.gfield_error,body .gform_wrapper li.gfield.gfield_error.gfield_contains_required.gfield_creditcard_warning{
    background-color:transparent;
    margin-bottom:0!important;
    padding:0!important;
    border:none
}

body .gform_wrapper .top_label .gfield_error{
    width:inherit
}

body .gform_wrapper .gfield_error .gfield_label{
    color:inherit
}

body .gform_wrapper .top_label li.gfield.gfield_error.gf_left_third,body .gform_wrapper .top_label li.gfield.gfield_error.gf_middle_third,body .gform_wrapper .top_label li.gfield.gfield_error.gf_right_third{
    width:32%
}

body .gform_wrapper .datepicker{
    width:8em!important
}

body .gform_wrapper .gfield_date_day input,body .gform_wrapper .gfield_date_month input,body .gform_wrapper .gfield_date_year input,body .gform_wrapper .gfield_time_hour input,body .gform_wrapper .gfield_time_minute input{
    padding-right:6px!important
}

body .gform_wrapper .gfield_time_hour i{
    width:25%
}

body .gform_wrapper .gfield_date_day,body .gform_wrapper .gfield_date_month{
    width:4.5em
}

body .gform_wrapper .gfield_date_year{
    width:5.5em!important
}

body .gform_wrapper .gf_progressbar_percentage{
    font-family:inherit
}

@media (max-width:641px){body .gform_wrapper .gform_page_footer .button.gform_button,body .gform_wrapper .gform_page_footer .button.gform_next_button,body .gform_wrapper .gform_page_footer .button.gform_previous_button{
    margin:0 0 .5em
}}

@media (min-width:641px){body .gform_wrapper .gform_footer a.gform_save_link,body .gform_wrapper .gform_page_footer a.gform_save_link{
    float:left
}}

/* submit button */
body .gform_wrapper .gform_footer input.button, body .gform_wrapper .gform_page_footer input.button, body div.form_saved_message div.form_saved_message_emailform form input[type=submit] { 
    background-color: #16c4f0; 
    color: #fff; 
    border-color: #16c4f0; 
    border-radius: 4px;
}

/* submit button hover */
body .gform_wrapper .gform_footer input.button:hover, body .gform_wrapper .gform_page_footer input.button:hover, body div.form_saved_message div.form_saved_message_emailform form input[type=submit]:hover 
{ 
    background-color: #16c4f0; 
    color: #fff;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
}

/* change asterisk color*/
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_label .gfield_required {
    color: #bbb;
    }
    
/* error validation color*/
body .gform_wrapper .validation_error {
    border: none !important; 
    color: #bbb !important;
}

body .gform_wrapper .gform_body .gform_fields .gfield_error {
    border: none !important; 
    color: #bbb !important;
}

body .gform_wrapper .gform_body .gform_fields .gfield_error .validation_message {
    border: none !important; 
    color: #bbb !important;
}

.gform_wrapper li.gfield_error ul.gfield_radio {
    color: #bbb !important;
}

.gform_wrapper li.gfield_error input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), .gform_wrapper li.gfield_error textarea {
    border: none !important;
}

.gform_wrapper .gfield_error .gfield_label {
    color: #bbb !important;
}

以上是关于css DIVI的重力形式样式[在子主题CSS文件中插入]的主要内容,如果未能解决你的问题,请参考以下文章

css 重力Wiz //重力形式//水平形式助手样式

css 重力Wiz //重力形式//水平形式助手样式

css 重力特权//重力形式多页面导航//样式指南

css 重力特权//重力形式多页面导航//样式指南

css 重力形式样式(简单)

css 样式 - 重力形式WordPress插件