Styling Gravity Forms with Material Design Look

gravity-forms-material-design.css

/*** 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;
}