JS设置输入框Placeholder颜色仅Firefox生效，其他浏览器失效求助

问题根源 #

Chrome、Safari等WebKit内核浏览器中，输入框的placeholder样式是通过伪元素单独控制的，直接设置<input>元素的color样式只会影响用户输入的文本，不会作用于placeholder。而Firefox允许placeholder继承input的color属性，所以你之前的方法在Firefox中生效，但其他浏览器不行。

解决方案 #

通过CSS类结合JS来切换placeholder的样式，具体步骤如下：

1. 添加CSS样式类
   定义一个控制placeholder颜色的类，兼容不同浏览器的伪元素语法：

.placeholder-red::placeholder {
  color: red;
}
/* 兼容WebKit内核浏览器（Chrome、Safari） */
.placeholder-red::-webkit-input-placeholder {
  color: red;
}
/* 兼容旧版Firefox */
.placeholder-red::-moz-placeholder {
  color: red;
  opacity: 1; /* 旧版Firefox默认placeholder有透明度，需重置 */
}

2. 修改JS逻辑
   不再直接设置input.style.color，而是通过添加/移除CSS类来切换样式：

<html>
<head>
  <style>
    .placeholder-red::placeholder {
      color: red;
    }
    .placeholder-red::-webkit-input-placeholder {
      color: red;
    }
    .placeholder-red::-moz-placeholder {
      color: red;
      opacity: 1;
    }
  </style>
</head>
<body>
  <input type="text" class="email" name="email" placeholder="initial placeholder text" size="48"><br />
  <button onClick="Validate()">
    Validate
  </button>

  <script>
  function Validate() {
    var email = document.getElementsByClassName("email")[0];

    if (email.value.trim() == '') {
      email.placeholder = "Updated placeholder text";
      // 添加类来设置placeholder红色
      email.classList.add('placeholder-red');
    } else {
      // 输入有内容时移除类，恢复默认样式
      email.classList.remove('placeholder-red');
    }
  }
  </script>
</body>
</html>

额外说明 #

• 伪元素的样式无法通过JS直接修改，所以必须借助CSS类来实现动态切换。
• 旧版Firefox的::-moz-placeholder默认带有透明度，需要设置opacity:1才能让红色完全显示。
• 如果需要重置样式，只需要移除对应的CSS类即可。

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