CSS如何调整Input占位符位置？需将Placeholder置于输入框边框

哈哈，这个需求我之前也帮人解决过！原生的::placeholder伪元素确实没法直接把占位符移到边框上——因为它的定位被限制在输入框内部，没法突破边界。不过咱们可以用模拟占位符的方式来实现这个效果，下面给你两种靠谱的方案：

方案一：利用<label>标签模拟占位符 #

这种方法兼容性拉满，几乎所有浏览器都支持。思路是把label作为「假占位符」，定位在输入框的边框位置，当输入框获得焦点或者有内容时，再把label移开或者调整样式。

<div class="input-wrapper">
  <input type="text" id="filter" class="filter" />
  <label for="filter">请输入内容</label>
</div>

.input-wrapper {
  position: relative;
  display: inline-block;
}

.filter {
  padding: 8px 12px;
  border: 1px solid #ccc;
  font-size: 14px;
  /* 给label留出顶部空间，避免输入内容被遮挡 */
  padding-top: 18px;
}

.input-wrapper label {
  position: absolute;
  top: -8px; /* 调整这个值让label贴在边框顶部 */
  left: 10px;
  background-color: white; /* 用背景色盖住边框，让文字看起来嵌在边框上 */
  padding: 0 4px;
  color: gray;
  font-size: 14px;
  pointer-events: none; /* 点击label时自动触发输入框焦点 */
  transition: all 0.2s ease;
}

/* 输入框有焦点或已有内容时，让label上移变小 */
.filter:focus + label,
.filter:not(:placeholder-shown) + label {
  top: -12px;
  font-size: 12px;
  color: #666;
}

方案二：使用父元素伪元素模拟 #

如果不想额外写label标签，也可以给输入框的父元素加伪元素来实现，原理和上面一致：

<div class="input-wrapper">
  <input type="text" class="filter" placeholder=" " />
</div>

.input-wrapper {
  position: relative;
  display: inline-block;
}

.filter {
  padding: 8px 12px;
  border: 1px solid #ccc;
  font-size: 14px;
  padding-top: 18px;
}

.input-wrapper::before {
  content: "请输入内容";
  position: absolute;
  top: -8px;
  left: 10px;
  background-color: white;
  padding: 0 4px;
  color: gray;
  font-size: 14px;
  pointer-events: none;
  transition: all 0.2s ease;
}

/* 焦点/有内容时的样式变化 */
.filter:focus ~ .input-wrapper::before,
.filter:not(:placeholder-shown) ~ .input-wrapper::before {
  top: -12px;
  font-size: 12px;
  color: #666;
}

小提示 #

• 你可以通过调整top、left的值精准控制占位符的位置，适配不同的边框粗细和布局需求。
• 两种方案都支持平滑的过渡动画，能提升用户体验。

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