Jak zmienić kolor zastępczy na fokusie?

Question

Jak zmienić kolor symbolu zastępczego podczas ustawiania ostrości w polu wprowadzania? Używam tego css do ustawienia domyślnego koloru, ale jak zmienić to na fokusie?

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

Answer 1

Spróbuj tego, to powinno działać:

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

Oto przykład: http://jsfiddle.net/XDutj/27/

Answer 2

Spróbuj tego:

HTML

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

CSS

input[placeholder]:focus { color: red; } 

Answer 3

Znalazłem ten roztwór z jQuery:

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

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

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

    }); 

z tym CSS:

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

Answer 4

Oprócz Pranav odpowiedzi I udoskonalił kod z kompatybilności textarea :

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

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

Answer 5

Z przeglądarki Firefox 19: Pseudoklasa: -moz-placeholder, która dopasowuje elementy formularza z atrybutem placeholder, została usunięta, a zamiast niego dodano pseudoelement :: - moz-placeholder.

input:focus::-moz-placeholder { color: transparent; } 

Answer 6

Zastosowanie gwiazda * aby zaznaczyć wszystko

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


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


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


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

Answer 7

Można utworzyć materiał projektowy animowane zastępczy, który kurczy się na szczycie, gdy pole tekstowe jest skoncentrowany.

<div class="field"> 
<input type="text" name="user" required><br> 
<label>Enter Username</label> 
</div> 

Zasadniczo pole etykiety będzie działało jak symbol zastępczy. Możemy to zrobić tylko za pomocą css. Wyjaśnione tutaj http://www.voidtricks.com/create-material-design-animated-placeholder/

Answer 8

Następujące pracował dla mnie:

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