输入框样式交互需求：聚焦/失焦时标签与边框颜色按状态切换

根据需求，我们需要实现以下交互效果：

• 输入框聚焦时，label和边框变为红色
• 输入框失焦时，若已输入内容则label和边框变为绿色；若未输入内容则保持红色

以下是修改后的完整代码：

HTML 代码 #

<div class="field name">
  <input type="text" class="inName" id="nameInput" placeholder=" ">
  <label for="nameInput" class="laName">Name</label>
</div>

CSS 代码 #

.field {
  position: relative;
  height: 40px; /* 防止容器因绝对定位塌陷 */
  margin: 20px; /* 增加间距便于查看效果 */
}

.inName {
  position: absolute;
  outline: none;
  z-index: 1;
  border: 1px solid silver;
  width: 250px;
  height: 100%;
  padding: 0 10px;
  font-size: 20px;
  background: #fff;
}

.laName {
  position: absolute;
  top: 7px;
  left: 10px;
  pointer-events: none;
  font-size: 20px;
  color: rgb(95, 99, 105);
  z-index: 1;
  background: #fff;
  transition: .3s;
}

/* 聚焦或有内容时，label统一上移 */
.inName:focus + .laName,
.inName:not(:placeholder-shown) + .laName {
  top: -12px;
  font-size: 15px;
  padding: 0 5px;
}

/* 聚焦状态：边框和label红色 */
.inName:focus {
  border-color: crimson;
}
.inName:focus + .laName {
  color: crimson;
}

/* 失焦且有内容：边框和label绿色 */
.inName:not(:focus):not(:placeholder-shown) {
  border-color: green;
}
.inName:not(:focus):not(:placeholder-shown) + .laName {
  color: green;
}

/* 失焦且无内容：边框和label保持红色 */
.inName:not(:focus):placeholder-shown {
  border-color: crimson;
}
.inName:not(:focus):placeholder-shown + .laName {
  color: crimson;
}

关键修改说明 #

1. 布局优化：给.field添加高度避免塌陷，给输入框设置合适的宽高和内边距，确保输入区域不被label遮挡。
2. 样式复用：将label上移的公共样式抽离，聚焦或有内容时统一触发，减少代码冗余。
3. 状态区分：
   • 聚焦状态：明确设置边框和label为红色
   • 失焦有内容：设置边框和label为绿色
   • 失焦无内容：保持边框和label为红色
4. 可访问性提升：label的for属性与input的id绑定，点击label可直接聚焦输入框。

内容的提问来源于stack exchange，提问作者Chhailbihari Pandey