如何用CSS为表单输入框添加前置自定义标签并修改占位符？

嘿，我来帮你搞定这个问题！你之前的CSS写法犯了两个小错误：一是选择器语法完全不对，二是把内容和选择器搞反了。咱们一步步来解决你的需求：

1. 给输入框添加前置标签（Where? / What?） #

要在Keywords输入框前加「Where?」、Location输入框前加「What?」，得用正确的CSS选择器定位到对应的容器或标签，再用:before伪元素插入内容。

方案一：定位输入框容器（推荐，不受原有label样式影响） #

如果你的页面里原有label被隐藏了（比如用display: none），直接给输入框的父容器加前置内容最稳妥：

/* 在Keywords输入框前添加Where?标签 */
.search_keywords:before {
  content: "Where? ";
  color: green;
  font-weight: bold; /* 可选：让标签更醒目 */
  margin-right: 8px; /* 可选：和输入框拉开点距离 */
}

/* 在Location输入框前添加What?标签 */
.search_location:before {
  content: "What? ";
  color: green;
  font-weight: bold;
  margin-right: 8px;
}

方案二：直接定位原有label元素 #

如果原有label还显示在页面上，也可以直接修改label的前置内容：

label[for="search_keywords"]:before {
  content: "Where? ";
  color: green;
}

label[for="search_location"]:before {
  content: "What? ";
  color: green;
}

2. 替换输入框的占位符文本 #

要把Keywords的占位符改成「Chef, Cleaner, Manager...」，Location改成「London, Berlin, Bristol...」，用CSS的::placeholder伪元素就能实现：

/* 替换Keywords输入框的占位符 */
#search_keywords::placeholder {
  content: "Chef, Cleaner, Manager...";
  color: #666; /* 可选：调整占位符的颜色 */
}

/* 替换Location输入框的占位符 */
#search_location::placeholder {
  content: "London, Berlin, Bristol...";
  color: #666;
}

兼容旧版浏览器（可选） #

如果需要兼容旧版Chrome、Firefox，可以加上浏览器前缀：

/* 兼容旧版Chrome/Safari */
#search_keywords::-webkit-input-placeholder {
  content: "Chef, Cleaner, Manager...";
}
#search_location::-webkit-input-placeholder {
  content: "London, Berlin, Bristol...";
}

/* 兼容旧版Firefox */
#search_keywords::-moz-placeholder {
  content: "Chef, Cleaner, Manager...";
}
#search_location::-moz-placeholder {
  content: "London, Berlin, Bristol...";
}

完整CSS代码示例 #

把上面的代码组合起来，就是最终可用的样式：

/* 添加前置标签 */
.search_keywords:before {
  content: "Where? ";
  color: green;
  font-weight: bold;
  margin-right: 8px;
}

.search_location:before {
  content: "What? ";
  color: green;
  font-weight: bold;
  margin-right: 8px;
}

/* 替换占位符（含兼容） */
#search_keywords::placeholder,
#search_keywords::-webkit-input-placeholder,
#search_keywords::-moz-placeholder {
  content: "Chef, Cleaner, Manager...";
  color: #666;
}

#search_location::placeholder,
#search_location::-webkit-input-placeholder,
#search_location::-moz-placeholder {
  content: "London, Berlin, Bristol...";
  color: #666;
}

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