如何修改HTML5 textarea的placeholder颜色？textarea设置无效怎么办？

1. 如何修改HTML5中textarea的placeholder颜色？ #

要修改textarea的placeholder颜色，得借助CSS的伪元素来针对性设置样式。由于不同浏览器对伪元素的支持有差异，建议同时添加厂商前缀保证兼容性：

/* 现代浏览器通用写法 */
textarea::placeholder {
  color: #999; /* 替换成你需要的颜色值即可 */
  opacity: 1; /* 部分浏览器默认会降低placeholder透明度，设为1能让颜色完全显示 */
}

/* 兼容 Chrome、Safari */
textarea::-webkit-input-placeholder {
  color: #999;
  opacity: 1;
}

/* 兼容 Firefox 4-18 版本 */
textarea::-moz-placeholder {
  color: #999;
  opacity: 1;
}

/* 兼容 IE 10-11 */
textarea:-ms-input-placeholder {
  color: #999;
}

你可以把#999换成任意你想要的颜色代码，比如#ff5722（橙色）、#2196f3（蓝色）都可以。

2. input的placeholder颜色生效，但textarea的无效，该怎么解决？ #

这种情况大多是选择器优先级不匹配或者浏览器兼容性处理不全导致的，给你几个实用的排查和解决思路：

• 统一选择器优先级：如果你的input用了更具体的选择器（比如带类名的.form-input::placeholder），而textarea只写了textarea::placeholder，那textarea的样式很可能被其他高优先级样式覆盖。建议用相同的选择器匹配input和textarea，比如两者共用同一个类名的话：

<!-- HTML结构示例 -->
<input class="form-field" placeholder="单行输入">
<textarea class="form-field" placeholder="多行输入"></textarea>

/* 统一设置两者的placeholder样式 */
.form-field::placeholder {
  color: #666;
  opacity: 1;
}

/* 补充各浏览器前缀 */
.form-field::-webkit-input-placeholder {
  color: #666;
  opacity: 1;
}

.form-field::-moz-placeholder {
  color: #666;
  opacity: 1;
}

.form-field:-ms-input-placeholder {
  color: #666;
}

• 补全浏览器前缀：有些旧版本浏览器（比如Firefox 4-18）不支持通用的::placeholder，必须用特定前缀。如果只写了通用写法，textarea在这些浏览器里就不会生效，所以一定要把各个前缀的样式都加上。

• 排查样式覆盖问题：打开浏览器开发者工具（按F12），选中textarea元素，查看「Styles」面板里的placeholder样式是否被划掉（代表被其他样式覆盖）。找到冲突的样式规则，要么提高当前placeholder样式的优先级（比如给选择器加上父元素类名），要么修改冲突的样式。

另外尽量别用!important强制生效，除非万不得已——它会让样式维护变得麻烦，优先通过调整选择器优先级来解决问题。

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