html - cross - placeholder styles css




Ändern Sie die Platzhalterfarbe einer HTML5-Eingabe mit CSS (20)

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

Das 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 immer grey statt red .

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


Implementierung

Es gibt drei verschiedene Implementierungen: Pseudo-Elemente, Pseudo-Klassen und nichts.

  • WebKit, Blink (Safari, Google Chrome, Opera 15+) und Microsoft Edge verwenden ein ::-webkit-input-placeholder : ::-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 :-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 überhaupt nicht, während Opera 12 und niedriger keinen CSS-Selektor für Platzhalter unterstützt.

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 einer input erhält nicht die gleiche Hintergrundfarbe wie das Pseudoelement.

CSS-Selektoren

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

Eine 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 eine reduzierte Deckkraft zu haben, daher muss hier die opacity: 1 werden.
  • Beachten Sie, dass Platzhaltertext nur abgeschnitten wird, wenn er nicht passt. Passen Sie die Größe Ihrer Eingabeelemente 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 das gleiche 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 ( email , search ). Diese können das Rendern auf unerwartete Weise beeinflussen. Verwenden Sie die properties -webkit-appearance und -moz-appearance zu ändern. Beispiel:
    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

Bei Bootstrap Benutzern kann es bei der Verwendung von class="form-control" zu Problemen mit der CSS-Spezifität kommen. Sie sollten eine höhere Priorität erhalten:

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

Oder wenn Sie Less :

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

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


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

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

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

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 gestalten, 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 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


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 habe jede Kombination hier ausprobiert, um die Farbe auf meiner mobilen Plattform zu ändern, und schließlich war es:

-webkit-text-fill-color: red;

was hat den Trick getan.


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

Jetzt haben wir eine Standardmethode, um CSS auf den Platzhalter einer Eingabe anzuwenden: ::placeholder -Pseudoelement aus this CSS-Modul Level 4-Entwurf.


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 auch Textbereiche formatieren:

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

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

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

Verwenden Sie den neuen ::placeholder wenn Sie autoprefixer .

Beachten Sie, dass das .placeholder-mixin von Bootstrap zugunsten dieser Einstellung 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.


Wenn Sie Bootstrap 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;
}


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

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





html-input