邮箱输入验证不通过时，浮动占位符未正常回落

我来帮你搞定这个问题！你遇到的情况是因为当前CSS的选择器只处理了输入框聚焦或者失焦且内容合法的场景，但当输入错误格式的邮箱并失焦后，输入框处于:invalid（内容无效）且:not(:focus)（失焦）的状态，这时候没有对应的规则把浮动标签重置回原位，导致它一直保持悬浮。

修改后的CSS代码 #

.-input-container {
  max-width: 540px;
  padding-bottom: 30px;
  margin-top: 30px;
  /* 添加相对定位，确保浮动标签的绝对定位基于容器 */
  position: relative;
}

input.-textbox {
  width: 100%;
  border-radius: 40px;
  background-color: #f5f5f5;
  border: 1px solid #dddddd;
  padding: 16px 30px;
  font-size: 16px;
  color: #555555;
  font-family: OpenSans;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.88;
  letter-spacing: normal;
  text-align: left;
}

input.-textbox:focus{
  outline: none;
  box-shadow: none;
}

/* 聚焦或内容合法时，保持标签悬浮 */
input.-textbox:focus ~ .floating-label, 
input.-textbox:not(:focus):valid ~ .floating-label {
  top: 8px;
  bottom: 10px;
  left: 45px;
  font-size: 10px;
  opacity: 1;
  line-height: 2.1;
  font-family: OpenSans;
}

/* 失焦且内容无效时，把标签放回原位 */
input.-textbox:not(:focus):invalid ~ .floating-label {
  top: 18px;
  left: 45px;
  font-size: 16px; /* 恢复默认字体大小 */
}

input.-textbox ~ .floating-label {
  position: absolute;
  pointer-events: none;
  left: 45px;
  top: 18px;
  transition: 0.2s ease all;
  font-size: 16px; /* 明确默认字体大小 */
  opacity: 1;
}

改动说明 #

1. 给.input-container添加position: relative：确保浮动标签的绝对定位是相对于容器，而不是整个页面，避免布局偏移。
2. 新增input.-textbox:not(:focus):invalid ~ .floating-label规则：专门处理输入错误内容并失焦的情况，强制把标签重置回初始位置和样式。
3. 明确默认标签的font-size：避免样式继承导致的不一致。

如果你希望只要输入框有内容（不管对错），失焦后标签都保持悬浮，可以改用:placeholder-shown伪类（需要给input添加空占位符），代码调整如下：

替代方案（内容非空即悬浮）

1. 修改HTML的input，添加空占位符：

<input type="email" class="-textbox form-control" required="" placeholder=" ">

2. 修改CSS的悬浮规则：

input.-textbox:focus ~ .floating-label, 
input.-textbox:not(:focus):not(:placeholder-shown) ~ .floating-label {
  top: 8px;
  bottom: 10px;
  left: 45px;
  font-size: 10px;
  opacity: 1;
  line-height: 2.1;
  font-family: OpenSans;
}

这种方式不管内容是否合法，只要输入了内容，标签就会保持悬浮状态。

内容的提问来源于stack exchange，提问作者Aalind Sharma