CSS修复Mailchimp表单输入框失焦后浮动标签重叠问题

核心问题 #

• 选择器逻辑错误：你写的.floating-label:valid + .input-field完全颠倒了元素顺序和伪类归属，:valid是作用在输入框上的，且输入框在label前面，相邻兄弟选择器+需要匹配前置元素才能选中后置的label。
• 父容器缺少定位：.mc-field-group未设置position: relative，导致label的绝对定位基准错误，位置偏移。
• 输入框未预留顶部空间：标签上浮后没有足够位置，会和输入框内容重叠。

修正后的完整CSS代码 #

#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
#mc_embed_signup form{padding:0}

/* 父容器加相对定位，作为label的定位基准 */
.mc-field-group{
  border:none !important;
  outline:none !important;
  position: relative !important;
  padding-top: 20px !important; /* 给上浮的label预留顶部空间 */
  margin-bottom: 10px !important; /* 可选，调整输入框之间的间距 */
}

.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;
  width: 100% !important; /* 可选，让输入框撑满父容器 */
}

.floating-label {
  color: #8597a3 !important;
  position: absolute !important;
  top: 25px !important; /* 对应父容器的padding-top，初始位置在输入框内 */
  left: 0 !important; /* 对齐输入框左边 */
  -moz-transition: all 0.3s !important;
  -o-transition: all 0.3s !important;
  -webkit-transition: all 0.3s !important;
  transition: all 0.3s !important;
  z-index: 0 !important;
}
.input-field:focus, .input-field:valid {
  outline: 0 !important;
  border-bottom-color: #665856 !important;
}
/* 修正选择器 */
.input-field:focus + .floating-label, 
.input-field:valid + .floating-label {
  color: #665856 !important;
  -moz-transform: translateY(-25px) !important;
  -ms-transform: translateY(-25px) !important;
  -webkit-transform: translateY(-25px) !important;
  transform: translateY(-25px) !important;
}

可选优化 #

如果需要避免用户输入内容不符合格式（比如邮箱缺少@）时标签回落的问题，可给所有输入框添加placeholder=" "属性，同时在上面的选择器中追加.input-field:not(:placeholder-shown) + .floating-label规则，即可实现只要输入框非空，标签就保持上浮的效果。

内容的提问来源于stack exchange，提问作者Wilmer Demata