Skip to content

Instantly share code, notes, and snippets.

@agirlandhermac
Last active November 1, 2023 10:43
Show Gist options
  • Save agirlandhermac/fea162bd380cb44735c562449f5c1059 to your computer and use it in GitHub Desktop.
Save agirlandhermac/fea162bd380cb44735c562449f5c1059 to your computer and use it in GitHub Desktop.
Styling Gravity Forms with Material Design Look
/*** MAIN WRAPPER ***/
.gform_wrapper {
background: #6000AA;
padding: 5%;
}
/*** REMOVE LABEL FOR PLACEHOLDER ONLY ***/
.gform_wrapper .top_label .gfield_label,
.gform_wrapper .field_sublabel_below .ginput_complex.ginput_container label {
display: none;
}
/*** FIELD STYLING ***/
.gform_wrapper ul.gform_fields li.gfield,
.gform_wrapper .top_label li.gfield.gf_right_half {
padding-right: 0;
}
input[type=text],
textarea {
background: #8300E9;
border: none;
border-radius: 0;
color: #fff !important;
font-weight: 700 !important;
letter-spacing: 2px !important;
padding: 17px 15px !important;
}
/*** FIELD FOCUS STYLING ***/
input[type=text]:focus,
input.text:focus,
input.title:focus,
textarea:focus {
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .2);
}
/*** MESSAGE BOX TRANSITION ***/
.gform_wrapper textarea.medium {
margin-top: 6px;
height: 10em;
transition: height .3s ease-out;
}
/*** MESSAGE BOX FOCUS HEIGHT ***/
.gform_wrapper textarea.medium:focus {
height: 25em;
}
/*** BUTTON STYLING ***/
.gform_wrapper .gform_footer input.button,
.gform_wrapper .gform_footer input[type=submit] {
width: 100%;
}
.gform_wrapper input[type=submit] {
cursor: pointer;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 2px;
padding: 10px 12px;
border-radius: 0;
background: #19ffc0;
color: rgba(0, 0, 0, 0.5);
border: none;
transition: box-shadow .2s ease-in-out;
}
/*** BUTTON HOVER STYLING ***/
.gform_wrapper input[type=submit]:hover {
background: #f2bf2f;
color: #fff;
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .2);
}
/*** PLACEHOLDER ***/
::-webkit-input-placeholder {
/* Chrome */
color: rgba(255, 255, 255, 0.7) !important;
}
:-ms-input-placeholder {
/* IE 10+ */
color: rgba(255, 255, 255, 0.7) !important;
}
::-moz-placeholder {
/* Firefox 19+ */
color: rgba(255, 255, 255, 0.7) !important;
}
:-moz-placeholder {
/* Firefox 4 - 18 */
color: rgba(255, 255, 255, 0.7) !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment