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!