Advanced styling gravity form

Get Help
1

Hey everyone,

I’m trying to style my form, but i can’t seem to get it to work. I’m trying to achieve this:

I got it almost working, but the label text is moving down again after filling in the form field. The label should stay on top instead of dropping down again. I believe is has something to do with :valid but i cant get the right selectors/classes.

This is what i got so far. On form field click and when typing the label moves up, but goes down if you go to the next form field.

input#gform_submit_button_1.gform_button{
    background-color: #00C2C9;
} 

/* Form input and select styles */
select,
textarea,
input[type=text],
input[type=email],
input[type=url],
input[type=tel],
.uneditable-input {
    display: inline-block;
    height: 4.5em !important;
    border: none !important;
    border-bottom: 2px solid rgb(0,194,201) !important;
    padding: 1em;
    font-size: 13px !important;
    line-height: normal;
    background-color: #ffffff;
    border-radius: 3px;
    box-shadow: none !important;
}

/* Focus styles for form fields */
body .gform_wrapper .gform_body .gform_fields .gfield input[type=text]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=email]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=tel]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=url]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=number]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield select:focus,
body .gform_wrapper .gform_body .gform_fields .gfield textarea:focus {
    border: 1px solid #00C2C9 !important;
    box-shadow: 0em 0.5em 2em 0em rgba(0,0,0,0.1) !important;
}

/* Form field labels */
body .gform_wrapper .top_label .gfield_label,
body .gform_wrapper .left_label .gfield_label,
body .gform_wrapper .right_label .gfield_label {
    color: rgb(0,194,201);
    font-size: 13px;
    text-transform: uppercase;
    position: absolute;
    background: white ;
    padding: 0.25em 1em;
    margin-top: 25px;
    margin-left: 5px;
    transition: color 0.3s ease;
    max-width: fit-content;
    border-bottom: none;
}
.gfield_required{
    display: none;
}

/* Form field labels in focus */
body .gform_wrapper .gform_body .gform_fields .gfield:focus-within .gfield_label {
    color: #00C2C9;
    transform: translateY(-175%);
    text-transform: lowercase;
    font-size:12px;
}

Can somebody maybe help me out and piont me in the right direction. Much apreciated!

2

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.