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

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

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

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

现在，我们有了一种标准的方法来将CSS应用于这个CSS模块Level 4草稿中输入的占位符：：占位符伪元素。

以下是CSS选择器的解决方案

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}

::-ms-input-placeholder { /* Microsoft Edge */
   color:    #909;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}

WebKit、Blink（Safari、Google Chrome、Opera 15+）和Microsoft Edge使用了伪元素：：：-webkit输入占位符。Mozilla Firefox 4到18使用了一个伪类：：-moz占位符（一个冒号）。Mozilla Firefox 19+使用了一个伪元素：：：-moz占位符，但旧选择器仍将工作一段时间。Internet Explorer 10和11正在使用伪类：：-ms输入占位符。InternetExplorer9及更低版本根本不支持占位符属性，而Opera12及更低版本不支持任何占位符CSS选择器。

好的，占位符在不同浏览器中的行为不同，因此您需要在CSS中使用浏览器前缀来使它们相同，例如Firefox默认为占位符提供透明度，因此需要在CSS中添加不透明度1，加上颜色，这在大多数情况下不是一个大问题，但保持它们一致性很好：

*::-webkit-input-placeholder { /* WebKit browsers */
    color:    #ccc;
}
*:-moz-placeholder { /* Mozilla Firefox <18 */
    color:    #ccc;
    opacity:  1;
}
*::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #ccc;
    opacity:  1;
}
*:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    #ccc;
}

对于Sass用户：

// Create placeholder mixin
@mixin placeholder($color, $size:"") {
  &::-webkit-input-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &:-moz-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &::-moz-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &:-ms-input-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
}

// Use placeholder mixin (the size parameter is optional)
[placeholder] {
  @include placeholder(red, 10px);
}

我不记得我在哪里找到了这个代码片段（它不是我写的，不记得我是在哪里找到的，也不记得是谁写的）。

$('[placeholder]').focus(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
            input.val('');
            input.removeClass('placeholder');
        }
    }).blur(function() {
        var input = $(this);
        if (input.val() == '' || input.val() == input.attr('placeholder')) {
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
        }
    }).blur();
    $('[placeholder]').parents('form').submit(function() {
        $(this).find('[placeholder]').each(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
            }
        })
    });

只需加载此JavaScript代码，然后通过调用以下规则使用CSS编辑占位符：

form .placeholder {
   color: #222;
   font-size: 25px;
   /* etc. */
}