文本字段上的表单标签重叠 - CSS
Form Label Overlaps on textfield - CSS
我有一个来自 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&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>
有一个特殊的 css selector 可以解决这个问题。输入框不需要 'required'，不需要复杂的 jQuery 条件。
只需添加空占位符和 select 带有 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&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>
我有一个来自 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&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>
有一个特殊的 css selector 可以解决这个问题。输入框不需要 'required'，不需要复杂的 jQuery 条件。
只需添加空占位符和 select 带有 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&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>