Form Label Overlaps on textfield - CSS - css

Question

I have a form from Mailchimp, that needs a bit of style modification. I am trying to create an effect when I focus on the input field, and the label will be placed on top of It; However, as soon as I unfocus from the input field, the label goes back from the previous position which overlaps the text input. I want the label to stay on top of the input field if it's not empty. I intentionally put !important to override Mailchimp styling.
I've been trying to solve this problem the whole day; I would appreciate it if someone can help me out.
Thanks!
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
#mc_embed_signup form{padding:0}
.input-field{
border: 0 !important;
padding: 0 !important;
z-index: 1 !important;
background-color: transparent !important;
border-bottom: 2px solid #eee !important;
font: inherit !important;
font-size: 14px !important;
line-height: 30px!important;
}
.floating-label {
color: #8597a3 !important;
position: absolute !important;
top: 10px !important;
-moz-transition: all 0.3s !important;
-o-transition: all 0.3s !important;
-webkit-transition: all 0.3s !important;
transition: all 0.3s !important;
}
.input-field:focus, .input-field:valid {
outline: 0 !important;
border-bottom-color: #665856 !important;
}
.input-field:focus + .floating-label, .floating-label:valid + .input-field {
color: #665856 !important;
-moz-transform: translateY(-25px) !important;
-ms-transform: translateY(-25px) !important;
-webkit-transform: translateY(-25px) !important;
transform: translateY(-25px) !important;
}
.mc-field-group{
border:none !important;
outline:none !important;
}
/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. /
</style>
<div id="mc_embed_signup">
<form action="https://m2comms.us5.list-manage.com/subscribe/post?u=3e58fab1fe0416a1387ddca81&id=42a1e07998" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<input type="email" value="" name="EMAIL" class="input-field" id="mce-EMAIL" required />
<label for="mce-EMAIL" class="floating-label">Email Address</label>
</div>
<div class="mc-field-group">
<input type="text" value="" name="FNAME" class="input-field" id="mce-FNAME" required />
<label for="mce-FNAME" class="floating-label">First Name </label>
</div>
<div class="mc-field-group">
<input type="text" value="" name="LNAME" class="input-field" id="mce-LNAME" required />
<label for="mce-LNAME" class="floating-label">Last Name </label>
</div>
<div class="mc-field-group">
<input type="text" value="" name="COMPANY_NAME" class="input-field" id="mce-CNAME" required />
<label for="mce-CNAME" class="floating-label">Company name </label>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_3e58fab1fe0416a1387ddca81_42a1e07998" tabindex="-1" value=""></div>
<div class="mc-field-group"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" style="color: black; margin-left: 0; background:#532e77!important; color:#ffffff; font-family: Montserrat; font-size: 16px; font-weight: 700; letter-spacing: 2px;"></div>
</div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';fnames[5]='COMPANY_NAME';ftypes[5]='company_name';}(jQuery));var $mcj = jQuery.noConflict(true);</script>

Answer 1

There is a special css selector that you can rely on for this problem. No 'required' needed for input boxes, no complex jQuery conditions needed.
Just add empty placeholder and select the labels with input:not(:placeholder-shown) ~ label . Code in detail below.
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
#mc_embed_signup form{padding:0}
.input-field{
border: 0 !important;
padding: 0 !important;
z-index: 1 !important;
background-color: transparent !important;
border-bottom: 2px solid #eee !important;
font: inherit !important;
font-size: 14px !important;
line-height: 30px!important;
}
.floating-label {
color: #8597a3 !important;
position: absolute !important;
top: 10px !important;
-moz-transition: all 0.3s !important;
-o-transition: all 0.3s !important;
-webkit-transition: all 0.3s !important;
transition: all 0.3s !important;
}
.input-field:focus, .input-field:valid {
outline: 0 !important;
border-bottom-color: #665856 !important;
}
.input-field:focus + .floating-label, .floating-label:valid + .input-field, input:not(:placeholder-shown) ~ label {
color: #665856 !important;
-moz-transform: translateY(-25px) !important;
-ms-transform: translateY(-25px) !important;
-webkit-transform: translateY(-25px) !important;
transform: translateY(-25px) !important;
}
.mc-field-group{
border:none !important;
outline:none !important;
}
/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. /
</style>
<div id="mc_embed_signup">
<form action="https://m2comms.us5.list-manage.com/subscribe/post?u=3e58fab1fe0416a1387ddca81&id=42a1e07998" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<input type="email" value="" name="EMAIL" class="input-field" id="mce-EMAIL" placeholder=" ">
<label for="mce-EMAIL" class="floating-label">Email Address</label>
</div>
<div class="mc-field-group">
<input type="text" value="" name="FNAME" class="input-field" id="mce-FNAME" placeholder=" ">
<label for="mce-FNAME" class="floating-label">First Name </label>
</div>
<div class="mc-field-group">
<input type="text" value="" name="LNAME" class="input-field" id="mce-LNAME" placeholder=" ">
<label for="mce-LNAME" class="floating-label">Last Name </label>
</div>
<div class="mc-field-group">
<input type="text" value="" name="COMPANY_NAME" class="input-field" id="mce-CNAME" placeholder=" ">
<label for="mce-CNAME" class="floating-label">Company name </label>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_3e58fab1fe0416a1387ddca81_42a1e07998" tabindex="-1" value=""></div>
<div class="mc-field-group"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" style="color: black; margin-left: 0; background:#532e77!important; color:#ffffff; font-family: Montserrat; font-size: 16px; font-weight: 700; letter-spacing: 2px;"></div>
</div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';fnames[5]='COMPANY_NAME';ftypes[5]='company_name';}(jQuery));var $mcj = jQuery.noConflict(true);</script>