Ändern Sie die Platzhalterfarbe einer HTML-Eingabe mit CSS

Chrome v4 unterstützt die Platzhalterattribut An input[type=text] Elemente (andere wahrscheinlich auch).

Das folgende CSS ändert jedoch nichts am Wert des Platzhalters:

input[placeholder], [placeholder], *[placeholder] {
    color: red !important;
}

<input type="text" placeholder="Value">

Value wird noch bleiben grey anstatt red.

Gibt es eine Möglichkeit, die Farbe des Platzhaltertextes zu ändern?

/* do not group these rules */
*::-webkit-input-placeholder {
    color: red;
}
*:-moz-placeholder {
    /* FF 4-18 */
    color: red;
    opacity: 1;
}
*::-moz-placeholder {
    /* FF 19+ */
    color: red;
    opacity: 1;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: red;
}
*::-ms-input-placeholder {
    /* Microsoft Edge */
    color: red;
}
*::placeholder {
    /* modern browser */
    color: red;
}

<input placeholder="hello"/> <br />
<textarea placeholder="hello"></textarea>

Dies wird alles stylen input Und textarea Platzhalter.

Wichtiger Hinweis: Gruppieren Sie diese Regeln nicht. Erstellen Sie stattdessen eine separate Regel für jeden Selektor (ein ungültiger Selektor in einer Gruppe macht die gesamte Gruppe ungültig).

Für Bootstrap Und Weniger Benutzer gibt es einen Mixin-Platzhalter:

// Placeholder text
// -------------------------
.placeholder(@color: @placeholderText) {
  &:-moz-placeholder {
    color: @color;
  }
  &:-ms-input-placeholder {
    color: @color;
  }
  &::-webkit-input-placeholder {
    color: @color;
  }
}

Zusätzlich zu Toschos Antwort habe ich einige erwähnenswerte Webkit-Inkonsistenzen zwischen Chrome 9-10 und Safari 5 mit den unterstützten CSS-Eigenschaften festgestellt.

Speziell Chrome 9 und 10 werden nicht unterstützt background-color, border, text-decoration Und text-transform beim Gestalten des Platzhalters.

Der vollständige Cross-Browser-Vergleich ist Hier.

Für Sass Benutzer:

// 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);
}