CSS3中input输入框placeholder点击效果实现问题咨询

问题原因 #

• 你错误使用了:checked伪类，该伪类仅对单选框、复选框生效，输入框获取焦点的状态应该用:focus伪类匹配
• 输入框默认聚焦会自带外轮廓样式，未禁用会出现额外边框
• 原生placeholder属性无法实现上浮变小的交互效果，需要配合label标签做状态控制

方案1：仅实现聚焦时占位符平滑隐藏 #

不需要修改HTML结构，直接调整CSS即可：

#input-id {
  border: none;
  border-bottom: 2px black solid;
  outline: none; /* 禁用默认聚焦外轮廓 */
}
/* 占位符默认样式 */
#input-id::placeholder {
  color: #666;
  transition: opacity 0.2s ease;
}
/* 聚焦时占位符隐藏 */
#input-id:focus::placeholder {
  opacity: 0;
}

<input id="input-id" placeholder="请输入内容">

方案2：实现占位符上浮到输入框左上角的浮动标签效果 #

需要调整HTML结构，配合CSS状态控制实现：

<div class="input-wrap">
  <input id="input-id" required>
  <label for="input-id">请输入内容</label>
</div>

/* 输入框容器，用于定位浮动label */
.input-wrap {
  position: relative;
  margin-top: 20px;
}
#input-id {
  border: none;
  border-bottom: 2px black solid;
  outline: none;
  font-size: 16px;
  padding: 10px 0;
  width: 100%;
}
/* 匹配输入框聚焦、已有输入内容的状态 */
#input-id:focus,
#input-id:not(:placeholder-shown) {
  border-bottom-color: #000; /* 可自定义为主题色 */
}
/* label替代原生placeholder实现浮动效果 */
.input-wrap label {
  position: absolute;
  left: 0;
  top: 10px;
  color: #999;
  transition: all 0.2s ease;
  pointer-events: none;
}
/* 聚焦、有内容时label上浮变小 */
#input-id:focus ~ label,
#input-id:not(:placeholder-shown) ~ label {
  top: -15px;
  font-size: 12px;
  color: #000; /* 可自定义为主题色 */
}

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