Ändern Sie die Platzhalterfarbe einer HTML5-Eingabe mit CSS

Chrome unterstützt das Platzhalterattribut für input[type=text]Elemente (andere wahrscheinlich auch).

Das Folgende CSShat jedoch nichts mit dem Wert des Platzhalters zu tun:

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

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

Valuewird immer noch greystatt bleiben red.

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

Implementierung

Es gibt drei verschiedene Implementierungen: Pseudoelemente, Pseudoklassen und nichts.

• WebKit, Blink (Safari, Google Chrome, Opera 15+) und Microsoft Edge verwenden ein Pseudoelement : ::-webkit-input-placeholder. ^{[ Ref ]}
• Mozilla Firefox 4 bis 18 verwendet eine Pseudoklasse: :-moz-placeholder( ein Doppelpunkt). ^{[ Ref ]}
• Mozilla Firefox 19+ verwendet ein Pseudoelement:, ::-moz-placeholderaber der alte Selektor funktioniert noch eine Weile. ^{[ Ref ]}
• Internet Explorer 10 und 11 verwenden eine Pseudoklasse : :-ms-input-placeholder. ^{[ Ref ]}
• April 2017: Die meisten modernen Browser unterstützen das einfache Pseudoelement ::placeholder ^{[ Ref ]}

Internet Explorer 9 und niedriger unterstützt das placeholderAttribut überhaupt nicht, während Opera 12 und niedriger keinen CSS-Selektor für Platzhalter unterstützen.

Die Diskussion über die beste Implementierung dauert noch an. Beachten Sie, dass die Pseudoelemente wie echte Elemente im Schatten-DOM wirken . A paddingauf einem inputerhält nicht die gleiche Hintergrundfarbe wie das Pseudoelement.

CSS-Selektoren

Benutzeragenten müssen eine Regel mit einem unbekannten Selektor ignorieren. Siehe Selektorstufe 3 :

Eine Gruppe von Selektoren, die einen ungültigen Selektor enthalten, ist ungültig.

Wir brauchen also separate Regeln für jeden Browser. Andernfalls würde die gesamte Gruppe von allen Browsern ignoriert.

::-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 { /* Internet Explorer 10-11 */
   color:    #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #909;
}

::placeholder { /* Most modern browsers support this now. */
   color:    #909;
}

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

Verwendungshinweise

• Vermeiden Sie schlechte Kontraste. Der Platzhalter von Firefox scheint standardmäßig eine reduzierte Deckkraft zu haben und muss daher opacity: 1hier verwendet werden.
• Beachten Sie, dass Platzhaltertext nur abgeschnitten wird, wenn er nicht passt. Ändern Sie die Größe Ihrer Eingabeelemente emund testen Sie sie mit großen Einstellungen für die Mindestschriftgröße. Vergessen Sie nicht die Übersetzungen: Einige Sprachen benötigen mehr Platz für dasselbe Wort.
• Browser mit HTML-Unterstützung, placeholderaber ohne CSS-Unterstützung (wie Opera) sollten ebenfalls getestet werden.
• Einige Browser verwenden für einige inputTypen ( email, search) zusätzliches Standard-CSS . Diese können sich auf unerwartete Weise auf das Rendern auswirken. Verwenden Sie die Eigenschaften -webkit-appearance und, um dies -moz-appearancezu ändern. Beispiel:

    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

/* 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 inputund textareaPlatzhalter formatiert.

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

Möglicherweise möchten Sie 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-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 Webkit-Inkonsistenzen zwischen Chrome 9-10 und Safari 5 mit den unterstützten CSS-Eigenschaften festgestellt, die erwähnenswert sind.

Insbesondere Chrome 9 und 10 nicht unterstützen background-color, border, text-decorationundtext-transform wenn Sie den Platzhalter Styling.

Der vollständige browserübergreifende 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);
}

Dies 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. Also müssen wir

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

Bildnachweis: David Walsh

Verwenden Sie das neue, ::placeholderwenn Sie Autoprefixer verwenden .

Beachten Sie, dass das .placeholder-Mixin von Bootstrap stammt dafür veraltet ist.

Beispiel:

input::placeholder { color: black; }

Bei Verwendung von Autoprefixer wird das Obige für alle Browser in den richtigen Code konvertiert.

Jetzt haben wir eine Standardmethode zum Anwenden von CSS auf den Platzhalter einer Eingabe: ::placeholderPseudoelement aus diesem Entwurf des CSS-Moduls Level 4.

Ich habe gerade für Mozilla Firefox 19+ festgestellt, dass der Browser einen Deckkraftwert für den Platzhalter angibt, sodass die Farbe nicht Ihren Wünschen entspricht.

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 opacityfür 1, also ist es gut zu gehen.

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 Ihren Platzhalter mit CSS, indem Sie diese Regel aufrufen:

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

Ich denke, dieser Code wird funktionieren, da ein Platzhalter nur für Text vom Typ Eingabe benötigt wird. Dieses einzeilige CSS reicht also für Ihre Anforderungen aus:

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

Wenn Sie Bootstrap- Benutzer verwenden class="form-control", liegt möglicherweise ein CSS-Spezifitätsproblem vor. Sie sollten eine höhere Priorität erhalten:

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

Oder wenn Sie Less verwenden :

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

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

Wenn Sie versuchen, den Platzhalter innerhalb einer .form-control CSS-Klasse 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;
}

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

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.

Ich habe hier jede Kombination versucht, um die Farbe auf meiner mobilen Plattform zu ändern, und schließlich war es:

-webkit-text-fill-color: red;

das hat den Trick gemacht.

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

//main.scss
@import 'bourbon';

input {
  width: 300px;

  @include placeholder {
    color: red;
  }
}

Bei der CSS-Ausgabe können Sie diesen Teil auch abrufen 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 verschiedene Eingabeelemente unterschiedlichen Stils

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 noch ein 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 sehr schönen und einfachen Möglichkeit: CSS-Filter !

Es wird alles gestylt, einschließlich des Platzhalters.

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

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

Schauen Sie sich dieses Snippet an, damit Benutzer es dynamisch ändern können, indem Sie eine Eingabetypfarbe für Änderungen verwenden oder Nuancen finden:

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 verschiedenen Browsern unterschiedlich. Sie müssen daher das Browserpräfix in Ihrem CSS verwenden, um sie identisch zu machen. Beispielsweise bietet Firefox Platzhaltern standardmäßig Transparenz. Fügen Sie Ihrem CSS also Deckkraft 1 hinzu, und die Farbe ist dies nicht Meistens ein großes Problem, aber gut, wenn sie konsistent sind:

*::-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 Ihr CSS-Konflikt zufällig funktioniert und dieser Code-Hinweis funktioniert, können Sie (! Wichtig) wie unten 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 den 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 dafür ein Mixin.

Nehmen Sie Ihr Beispiel:

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

Und in SCSS mit Kompass:

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

In den Dokumenten finden Sie Informationen zum Mixin der Eingabe-Platzhalter.

Hier ist die Lösung mit CSS-Selektoren

::-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+) und Microsoft Edge verwenden ein
  Pseudoelement : :: - Webkit-Eingabe-Platzhalter.
• Mozilla Firefox 4 bis 18 verwendet eine
  Pseudoklasse :: -moz-Platzhalter (ein Doppelpunkt).
  Mozilla Firefox 19+ verwendet ein Pseudoelement :
  :: - Moz-Platzhalter, aber der alte Selektor funktioniert noch eine Weile.
• Internet Explorer 10 und 11 verwenden eine Pseudoklasse:
  Pseudoklasse :: -ms-input-placeholder.
• Internet Explorer 9 und niedriger unterstützt das Platzhalterattribut überhaupt nicht, während Opera 12 und niedriger keinen CSS-Selektor für Platzhalter unterstützen.

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 'Satz eingeben' durch CSS ändert:

  ::placeholder{
  color:blue;
   }