Skip to content

Instantly share code, notes, and snippets.

@bUxEE
Created March 21, 2017 09:19
Show Gist options
  • Save bUxEE/1e46f28b2bd6d73f626e4b4466ab68a1 to your computer and use it in GitHub Desktop.
Save bUxEE/1e46f28b2bd6d73f626e4b4466ab68a1 to your computer and use it in GitHub Desktop.
Gravity forms css styling
/* GRAVITY FORMS */
select:focus, input[type="file"]:focus, input[type="radio"]:focus {
outline: none !important;
}
.gform_wrapper .gform_body {
width:100%!important;
}
#gform_wrapper_1 {
margin:0!important;
}
.gform_confirmation_message {
color:#191a1d;
line-height:20px!important;
font-size:20px;
}
.gfield_label {
margin:0!important;
padding:0!important;
font-size:14px!important;
font-weight:500!important;
color: #333 !important;
}
.gform_body input[type="text"],.gform_body input[type="email"],.gform_body textarea {
padding-left:5px!important;
border:1px solid #191a1d;
background-color:#fff;
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
height: 50px !important;
line-height: 30px !important;
font-size: 20px !important;
}
.gform_body input[type=radio] {
width:30px!important;
height:30px!important;
border-radius:2px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border:1px solid #191a1d;
background-color:#fff;
-moz-appearance:none;
appearance:none;
-webkit-appearance:none;
margin:2px 2px 5px 4px;
}
.gform_body input[type="radio"]:checked {
background:#FFCD3C!important;
color:#fff!important;
top:0!important;
height:30px!important;
width:30px!important;
padding:1px 0 0 1px;
}
.gform_body input[type="button"],.gform_body input[type="submit"],.gform_button {
width:48%!important;
border: none;
height:60px;
color:#333 !important;
font-size:24px!important;
margin:0 0 20px 0 !important;
display: inline-block;
}
.gform_body input[type="submit"] {
background: #C8F295 !important;
color: #333 !important;
}
.chosen-single {
border: none !important;
padding-left: 4px !important;
background: white !important;
color: #333 !important;
height: 35px !important;
line-height: 38px !important;
box-shadow: none !important;
border-radius: 3px !important;
}
.chosen-container a div {
padding-top: 6px;
width: 28px !important;
}
.chosen-single > div > b {
position: absolute !important;
top: 15% !important;
background: none !important;
}
.gfield_select {
background: transparent !important;
box-shadow: none;
padding-left:5px!important;
background-color:#fff;
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
height: 50px !important;
line-height: 30px !important;
font-size: 20px !important;
margin: 0 !important;
border: none !important;
}
.ginput_container_select {
background: white;
position: relative;
border:1px solid #191a1d;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.ginput_container_select:after {
content: "\f13a" !important;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
position: absolute;
right: 5px;
top: 50%;
font-size: 25px;
line-height: 0;
color: #0bca00
}
.gform_body input[type="button"]:hover {
background-color:#C8F295;
}
.textarea.large {
height: 170px !important;
}
.gfield_error .chosen-container-single {
border:none !important;
}
.validation_message {
color:#bf151d!important;
font-weight:400!important;
letter-spacing:normal!important;
font-size:14px!important;
line-height:20px!important;
margin:-20px 0 0 2px!important;
padding:0 6px 0 0!important;
width:100%!important;
text-align:left;
}
.gfield_error .chosen-container {
border:none!important;
}
.validation_error {
display:none!important;
}
.gfield_error {
background-color:rgba(0,0,0,0)!important;
border-top:none!important;
border-bottom:none!important;
}
.gform_body .ginput_container {
margin-bottom: 20px !important;
}
.gfield_error .gfield_label {
color:#191a1d!important;
}
.gform_page_footer {
width:100%!important;
margin:0!important;
padding:0!important;
border-top:none!important;
text-align: center;
}
.gform_wrapper .gform_footer {
padding-top:0!important;
margin-top: 20px !important;
text-align: center;
}
.gform_page_fields {
padding:0 10px!important;
}
.ginput_container,.gform_body li {
margin:0!important;
}
li.gfield {
padding:0 !important;
}
li.gfield.gfield_error {
margin:0 0 3px!important;
}
.gform_wrapper ul.gfield_radio {
margin:0!important;
}
.gform_wrapper .gfield_time_hour i {
width: 20px;
margin-top: 30%;
font-size: 30px;
}
#input_1_12_1, #input_1_12_1 {
text-align: center;
}
.gform_wrapper .top_label .gfield_label {
color: #333;
}
.gform_body .ginput_container.ginput_complex {
margin-bottom: 20px !important;
}
.gf_page_steps {
text-align: center;
}
.gf_step_number {
background: #ff9900;
border-radius: 50%;
height: 25px;
padding: 5px;
width: 25px;
text-align: center;
line-height: 17px;
color: white;
}
.gform_wrapper .field_sublabel_hidden_label .ginput_complex.ginput_container input[type=text], .gform_wrapper .field_sublabel_hidden_label .ginput_complex.ginput_container select {
margin-bottom: 0 !important;
}
.gform_wrapper li.hidden_label input {
margin-top: 0 !important;
}
/* checkboxes */
.checkboxer>.gfield_label {
display: inline-block !important;
padding-left: 15px !important;
width: calc(100% - 30px) !important;
float: right;
}
.gfield_checkbox, .gfield_checkbox li, .ginput_container_checkbox {
width: auto !important;
display: inline-block;
margin: 0 !important;
}
.gfield_checkbox li label {
width: 30px !important;
height: 30px !important;
}
.gform_wrapper .gfield_checkbox li label {
max-width: 100% !important;
}
.gfield_checkbox li label:before {
content: "";
font-family: Fontawesome;
display: block;
position: absolute;
z-index: 1;
-webkit-transition: all 100ms;
transition: all 100ms;
width: 30px !important;
height: 30px !important;
color: #5cb85c;
border: 1px solid #333;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
font-size: 24px;
line-height: 30px;
text-align: center;
}
.gform_wrapper input[type="checkbox"] {
opacity: 0;
outline: none;
z-index: 100;
width: 30px !important;
height: 30px !important;
top: 0;
left: 0;
margin: 0 !important;
padding: 0 !important;
position: absolute;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
border: 1px solid #333;
}
.gform_wrapper input[type="checkbox"] + label {
cursor: pointer;
color: white;
background: white;
}
.gform_wrapper input[type="checkbox"]:checked + label:before {
content: "\f00c";
font-family: Fontawesome;
display: block;
position: absolute;
z-index: 1;
-webkit-transition: all 100ms;
transition: all 100ms;
width: 30px !important;
height: 30px !important;
}
/* datepicker fix */
.ui-datepicker-month, .ui-datepicker-year {
width: 90%;
}
/*spinner hide */
img.gform_ajax_spinner {
display: none!important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment