Ändern Sie die Platzhalterfarbe einer HTML5-Eingabe mit CSS

3975

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?

David Murdoch
quelle
375
Schnelles Heads-up (keine Lösung, nur zu Ihrer Information): Wenn ich mich richtig erinnere, stimmt die Eingabe [Platzhalter] nur mit <input> -Tags überein, die ein Platzhalterattribut haben, sie stimmt nicht mit dem Platzhalterattribut selbst überein.
Pinkgothic
12
Yah, der Gedanke kam mir in den Sinn, dass dies wie der Versuch sein könnte, das "Titel" -Attribut eines Elements zu stylen. Also +1 für gleiches Denken!
David Murdoch
5
@MathiasBynens Die: Platzhalter-angezeigte Pseudoklasse stimmt mit einem Eingabeelement überein, das solchen Platzhaltertext anzeigt . Es stimmt also mit dem <input>Tag überein , wie der inputSelektor, zeigt aber gerade Platzhaltertext an. Es stimmt auch nicht mit dem Platzhalterattribut selbst überein.
HEX
3
@HEX Es ist nicht wie der inputSelektor, weil dadurch alle inputElemente ausgewählt werden. :placeholder-shownWählt nur inputElemente aus, die derzeit den Platzhalter anzeigen, sodass Sie nur diese Elemente formatieren und den Platzhaltertext effektiv formatieren können. Was versuchst du zu sagen?
Mathias Bynens
1
@ HEX (Natürlich wurden auch textareaElemente ausgewählt , die Platzhaltertext
anzeigen

Antworten:

4809

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;
    }
Fuxia
quelle
27
Beachten Sie auch, dass Webkit dies zwar als ziemlich spezifisch ansieht, Mozilla dies jedoch nicht. Sie müssen wahrscheinlich ein paar! Importanten da reinstecken, damit die Dinge auftauchen.
dmnc
18
@toscho: danke für die tolle antwort. Ich brauchte nur eine kleine Demonstration "live", damit Ihr Beispiel auch hier erreicht werden kann: jsfiddle.net/Sk8erPeter/KyVXK . Danke noch einmal.
Sk8erPeter
90
Der Platzhalter von Firefox scheint standardmäßig eine reduzierte Deckkraft zu haben. Verwenden Sie für alle anderen, die sich nur schwer erfrischen und fragen, warum zum Teufel dies nicht zu funktionieren scheint ("Warum ist mein weißer Text immer noch grau ..."), die Deckkraft: 1
jwinn
8
In IE10 *:-ms-input-placeholderund :-ms-input-placeholderan sich funktioniert das nicht, INPUT:-ms-input-placeholdertut es aber . Seltsam.
Jared
37
Hinweis für Bootstrap 3: Die Klasse "form-control" überschreibt die Farbe aufgrund der CSS-Spezifität (dh "form-control :: - webkit-input-placeholder"). Sie müssen also mindestens genauso spezifisch sein oder "! Important" verwenden. in Ihrem CSS. (Dies war die Hölle zum Debuggen, da weder Firebug noch Devtools diese Pseudoklasse zu zeigen scheinen)
Costa
725

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

Brillout
quelle
2
Das von Ihnen verlinkte MSDN-Dokument gibt an, dass es nur in Internet Explorer 10 unterstützt wird. Es ist immer noch ein guter Fund, aber nicht sehr nützlich, bis die IE10-Benutzerbasis von Bedeutung ist (wir sehen uns möglicherweise einen Zeitrahmen von Jahren dafür an).
Danishgoel
1
Realistisch gesehen möchten Sie Platzhalter auf der gesamten Website einheitlich gestalten und nicht jede einzelne Eingabe nach ID formatieren.
BadHorsie
10
Nach FF19 müssen Sie :: - Moz-Platzhalter
Viplezer
1
Sie müssen dieses CSS am Ende Ihres Stylesheets einfügen, wenn Sie auch eine Klasse auf die Eingabe anwenden, damit es im IE funktioniert (11). Siehe diese Gabelung auf JSFiddle jsfiddle.net/9kkef . Öffnen Sie die Seite sowohl im Internet Explorer als auch in einem anderen Browser. Im Internet Explorer sehen Sie, dass der Platzhaltertext die Farbe der angewendeten Klasse hat.
Timo002
Wenn dies nicht funktioniert, fügen Sie manchmal die Farbeigenschaft <! Important> hinzu.
Ahmed Na.
277

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;
}
Matt
quelle
2
beim Drucken in Chrome funktioniert nicht ... jede Hilfe @media print {Eingabe [Typ = Text] .form-control :: - Webkit-Eingabe-Platzhalter, Eingabe [Typ = Textbereich] .form-control :: - Webkit -input-placeholder {color: #FFFFFF; }}
Mahdi Alkhatib
107

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;
  }
}
EIIPII
quelle
16
Oder noch einfacher: Bearbeiten Sie die Variable @input-color-placeholder- normalerweise in variables.less
William
@William Wäre es nicht einfacher, den Selektor selbst zu definieren und das Mixin zu verwenden, um zu vermeiden, dass Sie zurückgehen und ihn ändern müssen, falls Sie den Platzhalter eines anderen Eingangs in eine andere Farbe bringen möchten?
Brandito
@Brandito - das klingt wie ein Randfall - Die Platzhalterfarbe ist im Allgemeinen für alle Formularelemente innerhalb eines Designs gleich.
William
@William Tut mir leid, dass ich schrecklich darin bin, dieses Zeug zu formulieren. Ich dachte, es wäre besser, das Mixin mit dem Argument der gewünschten Eingabefarbe zu verwenden, obwohl ich ehrlich gesagt wahrscheinlich an die Randfälle denke, die ich habe. Ich bin es gewohnt (den Platzhalter für die Sucheingabe so zu gestalten, dass er sich auf einem farbigen Hintergrund befindet: P). Tut mir leid, aber Sie haben Recht, entschuldigen Sie.
Brandito
99

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 .

ajcw
quelle
76

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);
}
Konst_
quelle
Flexibler Weg - zu verwenden@content;
Milkovsky
60

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

Liebe Trivedi
quelle
1
Ich musste hinzufügen! Wichtig auch in Firefox v56
Savage
49

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; 
}
Dionysios Arvanitis
quelle
41

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

Kristian
quelle
41

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.

hitautodestruct
quelle
40

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

3790069
quelle
Dies funktioniert in Firefox 51. Ich werde nur diese Methode verwenden. Die anderen Browser werden mich früh genug einholen (da keine Funktionalität beeinträchtigt wird, wenn der Standardstil nicht angewendet wird).
Lonnie Best
36

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.

Burak Tokak
quelle
35

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. */
}
Dragos Rizescu
quelle
3
Dies ist die alte Art, es zu tun, die ich ziemlich oft benutzt habe. Der Nachteil ist, dass der Platzhaltertext beim Fokussieren verschwindet. Ich habe festgestellt, dass dies ärgerlich ist, wenn die Benutzeroberfläche keine Beschriftungen neben der Eingabe enthält. In den letzten Monaten habe ich begonnen, diese Methode durch die Verwendung von Platzhaltertext zu ersetzen, was meiner Meinung nach eine UX-Verbesserung darstellt.
Redtopia
4
Das andere Problem mit Code wie diesem ist, dass Ihr serverseitiger Code Platzhaltertext als leere Eingabe behandeln muss. Dies hat Probleme mit Randfällen, in denen Sie eine Stadt namens "Stadt" eingeben möchten. Anstatt Werte mit dem Platzhaltertext zu vergleichen, sollten Sie wirklich ein datenmodifiziertes Flag für die Eingabe verwenden und dann die Eingabe beim Senden des Formulars löschen, wenn das Flag nicht gesetzt ist. Und für AJAX-Schnittstellen haben Sie möglicherweise nicht einmal ein Formular, sodass Sie in der Lage sein sollten, der Eingabe ein beliebiges Übermittlungsereignis zuzuordnen. Dies ist eine dieser wirklich einfachen Situationen, die es nicht ist.
Whelkaholism
34

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;
}
Alias ​​Varghese
quelle
Benutze diesen nicht mehr. Es gibt mehrere weitere Elemente mit Platzhalter und mehr Präfixen. Siehe oben stehende Lösungen oder ::placeholderzusammen mit dem Autoprefixer verwenden.
RiZKiT
33

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);
}
Gesicht
quelle
19

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;
}
stetiger Papa
quelle
17

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;}
BANTIMATHUR
quelle
17

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.

user1729061
quelle
15
Was passiert, wenn jemand nach dem Schreiben erneut klickt? Der ursprüngliche Text, den er geschrieben hat, ist verschwunden!
Lucky Soni
3
@LuckySoni du könntest das machen, aber ich persönlich bevorzuge den ersten. <input type="text" value="placeholder text" onfocus="if(!this.haswriting){this.style.color='#000'; this.value='';}" onblur="if(!this.value){this.style.color='#f00'; this.value='placeholder text'; this.haswriting=false;}else{this.haswriting=true};" style="color: #f00;"/>
user1729061
9
Selbst Ihre zweite Version bietet nicht die gleiche Funktionalität. Wenn der Benutzer das <form>mit dieser Eingabe übermittelt, wird der Platzhaltertext an den Server gesendet. Ich habe gesehen, dass so viele Websites dies falsch machen.
lqc
Das ist gefährlich! Wenn Sie wieder zu der Form zurückkehren, haben Sie alles verloren!
Mobarak Ali
15

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.

aviram83
quelle
2
This property allows you to specify a fill color for text. If it is not set, then the color property will be used to do the fill.Es klingt für mich so, als hätten Sie eine andere CSS-Regel, die die colorEigenschaft festlegt.
David Murdoch
8

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

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

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>

Mahendra Kulkarni
quelle
5

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

Geben Sie hier die Bildbeschreibung ein

Geben Sie hier die Bildbeschreibung ein

Geben Sie hier die Bildbeschreibung ein

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

Cryptopat
quelle
4

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;
}
Alireza
quelle
3

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.

Deepak Kumar
quelle
3

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

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

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.
Mohammad Ayoub Khan
quelle
0

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