Ändern Sie die Platzhalterfarbe eines HTML5 -Eingangs mit CSS

https://stackoverflow.com/questions/2610497

25-09-2019
|

Frage

Chrom unterstützt die Platzhalterattribut an input[type=text] Elemente (andere tun es wahrscheinlich auch).

Aber das Folgende CSS tut nichts mit dem Wert des Platzhalters:

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

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

Value wird noch bleiben grey Anstatt von red.

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

Lösung

Implementierung

Es gibt drei verschiedene Implementierungen: Pseudoelemente, Pseudoklasse 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 (eines Doppelpunkt). ^[Ref]
Mozilla Firefox 19+ verwendet ein Pseudoelement: ::-moz-placeholder, aber der alte Selektor wird noch eine Weile funktionieren. ^[Ref]
Internet Explorer 10 und 11 verwenden eine Pseudoklasse: :-ms-input-placeholder. ^[Ref]
April 2017: Die meisten modernen Browser unterstützen den einfachen Pseudoelement ::placeholder ^[Ref]

Internet Explorer 9 und Lower unterstützt die nicht placeholder Überhaupt überhaupt, während Opera 12 und niedriger nicht unterstützen Jeder CSS -Selektor für Platzhalter.

Die Diskussion über die beste Implementierung findet noch statt. Beachten Sie, dass die Pseudoelemente wie echte Elemente in der Shadow Dom. EIN padding auf an input Erhält nicht die gleiche Hintergrundfarbe wie das Pseudoelement.

CSS -Selektoren

Benutzeragenten müssen eine Regel mit einem unbekannten Selektor ignorieren. Sehen Selektoren Level 3:

a 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!">

Nutzungsnotizen

Achten Sie darauf, schlechte Kontraste zu vermeiden. Der Platzhalter von Firefox scheint mit einer verringerten Deckkraft versetzt zu sein. Daher muss verwendet werden opacity: 1 hier.
Beachten em und testen Sie sie mit großen Einstellungen für die minimale Schriftgröße. Vergessen Sie keine Übersetzungen: Einige Sprachen brauche mehr Platz für dasselbe Wort.
Browser mit HTML -Unterstützung für placeholder Aber ohne CSS sollte die Unterstützung dafür (wie Opera) auch getestet werden.
Einige Browser verwenden zusätzliche Standard -CSS für andere input Typen (email, search). Diese können das Rendering auf unerwartete Weise beeinflussen. Verwenden Sie das Eigenschaften -webkit-appearance und -moz-appearance das ändern. Beispiel:

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

Andere Tipps

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

Möglicherweise möchten Sie auch Textbereich stylen:

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

Zum Bootstrap und Weniger Benutzer, es gibt einen Mixin. PlaceHolder:

// 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 bemerkt, die erwähnenswert sind.

Speziell Chrom 9 und 10 unterstützen nicht background-color, border, text-decoration und text-transform Beim Stylen des Platzhalters.

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

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

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

Anerkennung: David Walsh

Verwenden Sie das neue ::placeholder wenn du benutzt Autoprefixer.

Beachten Bootstrap ist dafür veraltet.

Beispiel:

input::placeholder { color: black; }

Bei der Verwendung von autoprefixer wird das oben genannte in den richtigen Code für alle Browser konvertiert.

Jetzt haben wir eine Standardmethode, um CSS auf den Platzhalter eines Eingangs anzuwenden: ::placeholder Pseudoelement von Dies CSS Modul Level 4 Draft.

Ich erkenne nur etwas für Mozilla Firefox 19+, dass der Browser dem Platzhalter einen Deckkraftwert bietet, sodass die Farbe nicht das ist, was 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 das opacity Für 1, also wird es gut gehen.

Ich erinnere mich nicht, wo ich diesen Code -Snippet im Internet gefunden habe (er wurde nicht von mir geschrieben, erinnere mich nicht, wo ich ihn 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 diesen JavaScript -Code einfach 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, weil ein Platzhalter nur für den Eingabetyp benötigt wird. Diese eine Zeile CSS reicht also für Ihr Bedürfnis aus:

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

Zum Bootstrap Benutzer, wenn Sie verwenden class="form-control", Es kann ein CSS -Spezifitätsproblem geben. Sie sollten eine höhere Priorität haben:

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

Oder wenn Sie verwenden Weniger:

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

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

Wenn Sie versuchen, den Platzhalter in a zu ändern .form-kontroll CSS -Klasse dann sollten Sie sie so ü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 jede Kombination hier ausprobiert, um die Farbe auf meiner mobilen Plattform zu ändern, und schließlich war es:

-webkit-text-fill-color: red;

Welches war der Trick.

Für den SASS/SCSS -Benutzer verwenden Bourbon, Es hat eine integrierte Funktion.

//main.scss
@import 'bourbon';

input {
  width: 300px;

  @include placeholder {
    color: red;
  }
}

CSS -Ausgabe, Sie können diesen Teil auch greifen 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 unterschiedliche Eingabeelemente unterschiedlicher Stile

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

Es wird alles stylen, einschließlich des Platzhalters.

Im Folgenden werden beide Eingaben auf derselben Palette unter Verwendung des Farbtonfilters zur Farbänderung festgelegt. Es macht jetzt in Browsern sehr gut (außer dh ...)

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

Damit Benutzer es dynamisch ändern können, eine Eingangstypfarbe für Änderungen verwenden oder Nuancen finden, lesen Sie dieses Snippet:

Aus: 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 Docs: https://developer.mozilla.org/en-us/docs/web/css/filter

OK, Platzhalter verhalten sich in verschiedenen Browsern anders, sodass Sie das Browser -Präfix in Ihrem CSS verwenden müssen, um sie identisch zu machen. Zum Beispiel gibt Firefox den Platzhalter standardmäßig eine Transparenz. Sie müssen also Ihrem CSS und der Farbe Opazität 1 hinzufügen, plus die Farbe, es ist nicht so Eine große Sorge meistens, aber 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 eines HTML5 -Eingangs mit CSS ändern. Wenn Sie durch Zufall, Ihr CSS -Konflikt, können Sie (! Wichtig) wie unten verwendet.

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

Kompass Hat einen Mixin dafür.

Nehmen Sie Ihr Beispiel:

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

Und in SCSS mit Kompass:

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

Siehe Dokumente für den Eingabempfindungsmixin.

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-Input-Platzhalter.
Mozilla Firefox 4 bis 18 Verwendet eine Pseudoklasse:
: -moz-Placeholder (ein Dickdarm).
Mozilla Firefox 19+ Verwendet ein Pseudoelement:
::-Moz-Placeholder, aber der alte Selektor arbeitet noch eine Weile.
Internet Explorer 10 und 11 verwenden eine Pseudoklasse:
: -ms-Input-Platzhalter.
Internet Explorer 9 Und Lower unterstützt das Platzhalterattribut überhaupt nicht, während Opera 12 und Lower 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' von CSS eingreist:

  ::placeholder{
  color:blue;
   }

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow