Ändern Sie die Platzhalterfarbe einer HTML5-Eingabe mit CSS

/* 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>

Dadurch werden alle input- und textarea-Platzhalter formatiert.

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).

Sie können auch Textbereiche formatieren:

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #636363;
}
input:-moz-placeholder, textarea:-moz-placeholder {
  color: #636363;
}

Für Bootstrap und Less Benutzer gibt es einen mixin .placeholder:

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

Neben der Antwort von toscho sind einige Inkonsistenzen zwischen Chrome 9-10 und Safari 5 mit den unterstützten CSS-Eigenschaften aufgefallen, die erwähnenswert sind.

Insbesondere unterstützen Chrome 9 und 10 nicht die Codes background-color, border, text-decoration und text-transform, wenn Sie den Platzhalter gestalten.

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

Das wird gut funktionieren. DEMO HIER:

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #666;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #666;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #666;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #666;
}

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

In Firefox und Internet Explorer überschreibt die normale Farbe des Eingabetextes die Farbeigenschaft von Platzhaltern. Wir müssen also 

::-webkit-input-placeholder { 
    color: red; text-overflow: Ellipsis; 
}
:-moz-placeholder { 
    color: #acacac !important; text-overflow: Ellipsis; 
}
::-moz-placeholder { 
    color: #acacac !important; text-overflow: Ellipsis; 
} /* For the future */
:-ms-input-placeholder { 
    color: #acacac !important; text-overflow: Ellipsis; 
}

Browserübergreifende Lösung:

/* all elements */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }

/* individual elements: webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

/* individual elements: mozilla */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

Gutschrift: David Walsh

Verwenden Sie den neuen ::placeholder, wenn Sie autoprefixer verwenden.

Beachten Sie, dass das .placeholder-mixin aus Bootstrap zugunsten dieses nicht mehr empfohlen wird.

Beispiel:

input::placeholder { color: black; }

Wenn Sie Autoprefixer verwenden, wird der obige Code für alle Browser in den richtigen Code konvertiert.

Nun haben wir eine Standardmethode, um CSS auf den Platzhalter einer Eingabe anzuwenden: ::placeholder Pseudoelement aus this CSS Module Level 4 Draft.

Ich erkenne gerade etwas für Mozilla Firefox 19+, dass der Browser einen Opazitätswert für den Platzhalter angibt, sodass die Farbe nicht die ist, die Sie wirklich wollen.

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #eee; opacity:1;
}
input:-moz-placeholder, textarea:-moz-placeholder {
    color: #eee; opacity:1;
}
input::-moz-placeholder, textarea::-moz-placeholder {
    color: #eee; opacity:1;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #eee; opacity:1;
}

Ich überschreibe die opacity für 1, also ist es gut zu gehen.

Ich denke, dass dieser Code funktionieren wird, da ein Platzhalter nur für den Eingabetyp Text benötigt wird. Daher reicht dieses einzeilige CSS für Ihre Bedürfnisse aus:

input[type="text"]::-webkit-input-placeholder {
    color: red;
}

Ich kann mich nicht erinnern, wo ich dieses Code-Snippet im Internet gefunden habe (es wurde nicht von mir geschrieben, ich kann mich nicht erinnern, wo ich es gefunden habe oder wer es geschrieben hat).

$('[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('');
            }
        })
    });

Laden Sie einfach diesen JavaScript-Code und bearbeiten Sie dann Ihren Platzhalter mit CSS, indem Sie diese Regel aufrufen:

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

Für Bootstrap Benutzer kann es bei der Verwendung von class="form-control" zu einem CSS-Spezifitätsproblem kommen. Sie sollten eine höhere Priorität bekommen:

.form-control::-webkit-input-placeholder {
    color: red;
}
//.. and other browsers

Oder wenn Sie Less verwenden:

.form-control{
    .placeholder(red);
}

Wie wäre es damit

<input type="text" value="placeholder text" onfocus="this.style.color='#000'; 
this.value='';" style="color: #f00;"/>

Kein CSS oder Platzhalter, aber Sie erhalten die gleiche Funktionalität.

Dieser kurze und saubere Code:

::-webkit-input-placeholder {color: red;}
:-moz-placeholder           {color: red; /* For Firefox 18- */}
::-moz-placeholder          {color: red; /* For Firefox 19+ */}
:-ms-input-placeholder      {color: red;}

Wenn Sie Bootstrap verwenden und dies nicht funktionieren konnte, haben Sie wahrscheinlich die Tatsache übersehen, dass Bootstrap diese Selektoren selbst hinzufügt. Dies ist Bootstrap v3.3, über das wir sprechen.

Wenn Sie versuchen, den Platzhalter in einer CSS-Klasse .form-control zu ändern, sollten Sie ihn folgendermaßen überschreiben:

.form-control::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #777;
}
.form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #777;
    opacity:  1;
}
.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #777;
    opacity:  1;
}
.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    #777;
}

Ich habe jede Kombination hier versucht, um die Farbe auf meiner mobilen Plattform zu ändern.

-webkit-text-fill-color: red;

was hat den Trick getan.

Für SASS/SCSS-Benutzer, die Bourbon verwenden, ist eine integrierte Funktion vorhanden.

//main.scss
@import 'bourbon';

input {
  width: 300px;

  @include placeholder {
    color: red;
  }
}

CSS-Ausgabe können Sie auch diesen Teil nehmen und in Ihren Code einfügen.

//main.css

input {
  width: 300px;
}

input::-webkit-input-placeholder {
  color: red;
}
input:-moz-placeholder {
  color: red;
}
input::-moz-placeholder {
  color: red;
}
input:-ms-input-placeholder {
  color: red;
}

versuchen Sie diesen Code für einen anderen Stil des Eingabeelements

your css selector::-webkit-input-placeholder { /*for webkit */
    color:#909090;
    opacity:1;
}
 your css selector:-moz-placeholder { /*for mozilla */
    color:#909090;
    opacity:1;
}
 your css selector:-ms-input-placeholder { /*for for internet exprolar */ 
   color:#909090;
   opacity:1;
}

beispiel 1:

input[type="text"]::-webkit-input-placeholder { /*for webkit */
    color: red;
    opacity:1;
}
 input[type="text"]:-moz-placeholder { /*for mozilla */
    color: red;
    opacity:1;
}
 input[type="text"]:-ms-input-placeholder { /*for for internet exprolar */ 
   color: red;
   opacity:1;
}

beispiel 2:

input[type="email"]::-webkit-input-placeholder { /*for webkit */
    color: gray;
    opacity:1;
}
 input[type="email"]:-moz-placeholder { /*for mozilla */
    color: gray;
    opacity:1;
}
 input[type="email"]:-ms-input-placeholder { /*for for internet exprolar */ 
   color: gray;
   }

Hier ist ein weiteres Beispiel:

.form-control::-webkit-input-placeholder {
  color: red;
  width: 250px;
}
h1 {
  color: red;
}

<div class="col-sm-4">
  <input class="form-control" placeholder="Enter text here.." ng-model="Email" required/>
</div>

Hinzufügen einer wirklich sehr schönen und einfachen Möglichkeit: css-Filter! 

Es wird alles, einschließlich des Platzhalters, gestalten.

Im Folgenden werden beide Eingaben in derselben Palette festgelegt, wobei der Farbtonfilter für die Farbänderung verwendet wird. Es wird jetzt sehr gut in Browsern gerendert (außer zB ...)

input {
  filter: sepia(100%) saturate(400%) grayscale(0) contrast(200%) hue-rotate(68deg) invert(18%);
}

<input placeholder="Hello world!" />
<input type="date" /><br>
<input type="range" />
<input type="color" />

Um Benutzern zu ermöglichen, sie dynamisch zu ändern, eine Eingabetypfarbe für Änderungen zu verwenden oder Nuancen zu finden, überprüfen Sie dieses Snippet:

Von: https://codepen.io/Nico_KraZhtest/pen/bWExEB

function stylElem() {
  stylo.dataset.hue = ((parseInt(stylo.value.substring(1), 16))/46666).toFixed(0)
  Array.from(document.querySelectorAll('input, audio, video')).forEach(function(e){
      e.style.cssText += ";filter:sepia(100%) saturate(400%)grayscale(0)contrast(200%)hue-rotate("+ stylo.dataset.hue+"deg)invert("+(stylo.dataset.hue/3.6)+"%)"
  out.innerText = e.style.cssText
})()}

stylElem()

<div id="out"></div> <p>
  <input placeholder="Hello world!" />
  <input type="date" /><br>
  <input type="range" />
  <input type="color" />
Colors (change me)-> 
<input type="color" id="stylo" oninput="stylElem()" /> <br><br>
<audio controls src="#"></audio> <br><br> 
<video controls src="#"></video>

Css filtert Dokumente: https://developer.mozilla.org/en-US/docs/Web/CSS/filter

OK, Platzhalter verhalten sich in den verschiedenen Browsern unterschiedlich. Daher müssen Sie das Browser-Präfix in CSS verwenden, um sie identisch zu machen. Firefox gibt beispielsweise Platzhaltern Transparenz, sodass Sie die Deckkraft 1 in Ihre CSS-Datei einfügen müssen Meistens ein großes Problem, aber es ist gut, sie konsequent zu haben:

*::-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;
}

Sie können die Platzhalterfarbe einer HTML5-Eingabe mit CSS ändern. Wenn durch Zufall Ihr CSS-Konflikt diesen Code-Hinweis funktioniert, können Sie (! Wichtig) wie folgt verwenden.

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:#909 !important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:#909 !important;
   opacity:1 !important;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:#909 !important;
   opacity:1 !important;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:#909 !important;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:#909 !important;
}

<input placeholder="Stack Snippets are awesome!">

Hoffe das wird helfen.

Sie können dies für Eingabe und Fokusstil verwenden:

input::-webkit-input-placeholder  { color:#666;}
input:-moz-placeholder  { color:#666;}
input::-moz-placeholder { color:#666;}
input:-ms-input-placeholder  { color:#666;}
/* focus */
input:focus::-webkit-input-placeholder { color:#eee; }
input:focus:-moz-placeholder { color:#eee } /* FF 4-18 */
input:focus::-moz-placeholder { color:#eee } /* FF 19+ */
input:focus:-ms-input-placeholder { color:#eee } /* IE 10+ */

Der einfachste Weg wäre:

#yourInput::placeholder {
    color: red;/*As an example*/
}
/* if that would not work, you can always try styling the attribute itself: */
#myInput[placeholder] {
    color: red;
}

Compass hat ein Mixin für dieses Paket.

Nimm dein Beispiel:

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

Und in SCSS mit Kompass:

input[type='text'] {
  @include input-placeholder {
    color: #616161;
  }
}

Siehe Dokumente zum Eingabe-Platzhalter-Mixin.

Ein Teil von HTML:

 <form action="www.anything.com">
 <input type="text" name="name"
  placeholder="Enter sentence"/>
  </form>

Ich werde zeigen, wie man die Farbe des Ausdrucks von 'Enter sentence' per CSS ändert:

  ::placeholder{
  color:blue;
   }

versuchen Sie, dies wird Ihnen helfen, dies funktioniert in allen Ihren bevorzugten Browsern:

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

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

Platzhalterfarbe für ein bestimmtes Element in verschiedenen Browsern.

HTML

<input class='contact' type="email" placeholder="[email protected]">

CSS 

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