webentwicklung-frage-antwort-db.com.de

Wie kann man die Farbe des Platzhalters ändern?

Wie kann ich die Farbe des Platzhalters ändern, wenn das Eingabefeld den Fokus hat? Ich benutze diese CSS, um die Standardfarbe festzulegen, aber wie kann man den Fokus ändern?

::-webkit-input-placeholder { color: #999; }

/* Firefox < 19 */
:-moz-placeholder { color: #999; }

/* Firefox > 19 */
::-moz-placeholder { color: #999; }

/* Internet Explorer 10 */
:-ms-input-placeholder { color: #999; }
htmlcsscolorsfocusplaceholder
51
Davide Palmieri

Versuchen Sie dies, das sollte funktionieren: 

input::-webkit-input-placeholder {
    color: #999;
}
input:focus::-webkit-input-placeholder {
    color: red;
}

/* Firefox < 19 */
input:-moz-placeholder {
    color: #999;
}
input:focus:-moz-placeholder {
    color: red;
}

/* Firefox > 19 */
input::-moz-placeholder {
    color: #999;
}
input:focus::-moz-placeholder {
    color: red;
}

/* Internet Explorer 10 */
input:-ms-input-placeholder {
    color: #999;
}
input:focus:-ms-input-placeholder {
    color: red;
}

Hier ist ein Beispiel: http://jsfiddle.net/XDutj/27/

101
Pranav 웃

Zusätzlich zur Pranav-Antwort habe ich den Code mit der Textarea-Kompatibilität verfeinert:

::-webkit-input-placeholder { color: #999; }
:-moz-placeholder { color: #999; }

:focus::-webkit-input-placeholder { color: #ccc; }
:focus:-moz-placeholder { color: #ccc; }​
5
Davide Palmieri

Verwenden Sie den Stern *, um alles auszuwählen

*::-webkit-input-placeholder { color: #999; }


*:-moz-placeholder { color: #999; }


*::-moz-placeholder { color: #999; }


*:-ms-input-placeholder { color: #999; }
1
KeepMove

Folgendes hat für mich gearbeitet:

input:focus::-webkit-input-placeholder
{
    color: red;
}
1
Bel

Versuche dies:

HTML

<input type='text' placeholder='Enter text' />

CSS

input[placeholder]:focus { color: red; }
1
Kevin Boucher

Ich habe diese Lösung mit JQuery gefunden:

 $('input[type="text"]').each(function(){

    $(this).focus(function(){
      $(this).addClass('input-focus');
    });

    $(this).blur(function(){
      $(this).removeClass('input-focus');
    });

  });

mit dieser css:

.input-focus::-webkit-input-placeholder { color: #f00; }    
.input-focus:-moz-placeholder { color: #f00; }
.input-focus:-ms-input-placeholder { color: #f00; }
1
Davide Palmieri

Von Firefox 19: Die: -moz-placeholder-Pseudoklasse, die Formularelemente mit dem Platzhalterattribut übereinstimmt, wurde entfernt und stattdessen das Pseudoelement :: - moz-placeholder hinzugefügt.

input:focus::-moz-placeholder { color: transparent; }
0
Leszek Pietrzak