it-swarm.com.de

Ändern Sie die Platzhalterfarbe einer HTML5-Eingabe mit CSS

Chrome unterstützt die Attribute Platzhalterattribute on input[type=text] (andere tun dies wahrscheinlich auch).

Die folgende CSS wirkt sich jedoch nicht auf den Wert des Platzhalters aus:

input[placeholder], [placeholder], *[placeholder] {
    color: red !important;
}
<input type="text" placeholder="Value">

Value bleibt grey statt red.

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

3744
David Murdoch

Implementierung

Es gibt drei verschiedene Implementierungen: Pseudo-Elemente, Pseudo-Klassen 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 Pseudo-Klasse: :-moz-placeholder (ein Doppelpunkt). [ Ref ]
  • Mozilla Firefox 19+ verwendet ein Pseudoelement: ::-moz-placeholder, der alte Selektor funktioniert jedoch 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 placeholder-Attribut überhaupt nicht, während Opera 12 und niedriger nicht unterstützt wird einen CSS-Selektor für Platzhalter.

Die Diskussion um die beste Umsetzung ist noch nicht abgeschlossen. Beachten Sie, dass sich die Pseudo-Elemente im Shadow DOM wie echte Elemente verhalten. Eine padding auf einer input erhält nicht die gleiche Hintergrundfarbe wie das Pseudoelement.

CSS-Selektoren

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

ein group von Selektoren, die einen ungültigen Selektor enthalten, ist ungültig.

Wir brauchen also separate Regeln für jeden Browser. Andernfalls wird 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 mit einer reduzierten Deckkraft zu sein, daher muss hier opacity: 1 verwendet werden.
  • Beachten Sie, dass Platzhaltertext nur abgeschnitten wird, wenn er nicht passt. Passen Sie die Größe Ihrer Eingabeelemente in em an und testen Sie sie mit großen Mindesteinstellungen für die Schriftgröße. Vergessen Sie nicht Übersetzungen: einige Sprachen brauchen mehr Platz für dasselbe Wort. 
  • Browser mit HTML-Unterstützung für placeholder, aber ohne CSS-Unterstützung (wie Opera) sollten ebenfalls getestet werden.
  • Einige Browser verwenden zusätzliche Standard-CSS für einige input-Typen (email, search). Diese können das Rendern auf unerwartete Weise beeinflussen. Verwenden Sie die Eigenschaften-webkit-appearance und -moz-appearance, um dies zu ändern. Beispiel:
    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }
4651
fuxia

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

684
brillout

Sie können auch Textbereiche formatieren:

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

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

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 .

95
ajcw

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

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

56
Love Trivedi

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

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

39
Kristian

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.

37
Mike

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

37
user3790069

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.

34
Burak Tokak

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;
}
32
Alias Varghese

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. */
}
32
Dragos Rizescu

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

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.

17
user1729061

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;}
16
Banti Mathur

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

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.

14
aviram83

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

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;
   }
6
Md. Abu Sayed

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>

5

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

 enter image description here

 enter image description here

 enter image description here

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

4
Cryptopat

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

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.

3
Deepak Kumar

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+ */
2
fraweb

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

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.

1
bendav91

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

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

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;
    }
0
Majedur Rahaman