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?
Es gibt drei verschiedene Implementierungen: Pseudo-Elemente, Pseudo-Klassen und nichts.
::-webkit-input-placeholder
. [ Ref ]:-moz-placeholder
(ein Doppelpunkt). [ Ref ]::-moz-placeholder
, der alte Selektor funktioniert jedoch noch eine Weile. [ Ref ]:-ms-input-placeholder
. [ Ref ]::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.
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!">
opacity: 1
verwendet werden.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. placeholder
, aber ohne CSS-Unterstützung (wie Opera) sollten ebenfalls getestet werden.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;
}
/* 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).
Sie können auch Textbereiche formatieren:
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #636363;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color: #636363;
}
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 .
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);
}
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" />
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;
}
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
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.
Nun haben wir eine Standardmethode, um CSS auf den Platzhalter einer Eingabe anzuwenden: ::placeholder
Pseudoelement aus this CSS Module Level 4 Draft.
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 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;
}
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. */
}
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);
}
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.
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;}
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;
}
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.
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;
}
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;
}
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, 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
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 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.
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;
}
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;
}
}
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;
}
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;
}
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;
}