求助：如何用CSS修改HTML5输入框placeholder的颜色？

你遇到的问题主要有两个原因，下面一步步给你修正：

1. ID大小写不匹配 #

CSS里写的是#Search（大写S），但HTML里输入框的ID是search（小写s）——CSS选择器区分大小写，导致样式根本没作用到目标输入框上。

2. ::placeholder的写法与兼容性问题 #

需要把伪元素和父选择器正确关联，同时加上不同浏览器的前缀保证兼容性，避免样式失效。

修正后的完整代码 #

CSS代码：

#search {
  margin: auto;
  display: block;
  background-color: royalblue;
  color: white;
  border-radius: 2500px;
  border: 3px solid white;
  padding: 20px;
  font-size: 30px;
  font-weight: 300;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* 兼容各浏览器的placeholder样式 */
#search::placeholder {
  color: white;
  opacity: 1; /* 部分浏览器默认给placeholder加透明度，强制设为1保证颜色纯正 */
}
#search::-webkit-input-placeholder { /* Chrome、Safari */
  color: white;
  opacity: 1;
}
#search:-moz-placeholder { /* Firefox 4-18 */
  color: white;
  opacity: 1;
}
#search::-moz-placeholder { /* Firefox 19+ */
  color: white;
  opacity: 1;
}
#search:-ms-input-placeholder { /* IE 10+ */
  color: white;
  opacity: 1;
}

HTML代码：

<div>
  <h1 id="Start"> webui </h1>
</div>
<br>
<input type="text" id="search" placeholder="Search" />

修改后，placeholder的白色就能正常显示，同时兼顾了不同浏览器的兼容性。

内容的提问来源于stack exchange，提问作者A-1500