尝试这将有助于您，这将在您最喜欢的浏览器中工作：

::-webkit-input-placeholder { 
    /* Chrome/Opera/Safari */
      color: pink;
    }
    ::-moz-placeholder { 
    /* Firefox 19+ */
      color: pink;
    }

    :-moz-placeholder { 
    /* Firefox 18- */
      color: pink;
    }

这个怎么样

<input type=“text”value=“placeholder text”onfocus=“this.style.color='#000'；this.value=“”；“style=”颜色：#f00；" />

没有CSS或占位符，但您可以获得相同的功能。

：：占位符{颜色：红色；}<input-type=“text”placeholder=“Value”>

试试这个

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

除了toscho的回答，我还注意到Chrome 9-10和Safari 5在支持CSS财产方面的一些webkit不一致，值得注意。

具体来说，Chrome 9和10在设置占位符样式时不支持背景色、边框、文本装饰和文本转换。

这里是完整的跨浏览器比较。

这对大多数现代浏览器都很好

input::placeholder{
  color: red; // css implementation
}

以防万一，如果您正在使用SCSS

input {
  &::placeholder {
    color: red; // scss
  }
}