表单标签重叠在文本域- CSS

Question

我有一个来自Mailchimp的表单，需要一些样式修改。我试图创建一个效果，当我专注于输入字段，标签将被放置在它的顶部;但是，一旦我从输入字段移开焦点，标签就会从与文本输入重叠的前一个位置返回。如果输入字段不是空的，我希望标签留在输入字段的顶部。我故意用!important来重写Mailchimp的样式。

我一整天都在试图解决这个问题;如果有人能帮我，我会很感激的。

谢谢!

<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&amp;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

有一个特殊的css选择器，你可以依靠它来解决这个问题。输入框不需要'required'，不需要复杂的jQuery条件。

只需添加空占位符并选择带有input:not(:placeholder-shown) ~ label的标签。详细代码如下。

<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&amp;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>