聚焦输入框时子文本元素background-color不显示的原因排查

原因分析 #

你的代码中，.placeholder2/.placeholder4/.placeholder6 这类 <span> 是行内元素（inline），即便设置了 background-color: #181212，背景色也只会严格包裹文字内容，无法覆盖周围区域；再加上这些 span 定位后会与输入框的边框重叠，导致视觉上看起来背景色没生效（实际是背景区域太小，没挡住下方的边框）。另外，页面背景色 #121212 和你设置的 #181212 颜色非常接近，也会让背景色的存在感极低。

解决方案 #

修改聚焦状态下的 CSS 规则，给这些 span 添加内边距并改为行内块元素，确保背景色区域足够覆盖文字及周围的边框：

.item1:focus~.placeholder2,
.item3:focus~.placeholder4,
.item5:focus~.placeholder6 {
  background-color: #181212;
  top: -10px;
  right: -8px;
  font-size: 16px;
  font-weight: normal;
  color: #e4a8a8;
  opacity: 1;
  /* 添加以下两行，扩展背景覆盖范围 */
  display: inline-block;
  padding: 0 4px;
}

可选优化 #

如果希望文字可读性更强，可以调整背景色的对比度，比如改用稍深的色调，避免和页面背景过于接近：

background-color: #201818; /* 比原颜色深，增强视觉区分度 */

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