zmiana koloru czcionki w polu tekstowym za pomocą CSS, gdy wartość jest wpisana w polu

Question

Mam pole tekstowe, które działa jak pole wyszukiwania na mojej stronie. Wstępnie wypełniam pole słowem "SZUKAJ", które ma domyślny kolor tekstu # D6D6D0.

Czy przy użyciu CSS można zmienić kolor tekstu na #FFFFFF, gdy ktoś wprowadzi tekst w polu?

<input type="text" name="q" value="SEARCH" id="searchFieldText"> 

#searchFieldText { 
    background: url("/images/crmpicco/search_bg3.png") no-repeat scroll 0 0 #000000; 
    border: medium none; 
    color: #D6D6D0; 
    float: left; 
    font-family: Arial,Helvetica,sans-serif; 
    font-size: 10px; 
    height: 21px; 
    padding-left: 0; 
    padding-top: 3px; 
    width: 168px; 
} 

Answer 1

Nacisk klasa pseudo powinien działać

#searchFieldText:focus { 
    color: #fff; 
} 

Answer 2

Używanie pseudoclass :focus rade dla Ciebie.

#searchFieldText:focus{ 
    color:#fff; 
} 

Polecam również do korzystania z nowego atrybutu placeholder dla pola wejściowego, który zrobi dla ciebie jakąś magię (trzeba mieć świadomość wsparcia jednak).

See the example

Answer 3

Korzystanie :focus będzie miała zastosowanie tylko wtedy, gdy okno jest obecnie w centrum uwagi, gdy użytkownik wychodzi z pola tekstowego kolor powróci.

Proponuję użyć atrybutu placeholder, nadpisać stylizację dla placeholder, aby uzyskać żądany kolor #D6D6D0 i zastosować żądany styl w polu tekstowym.

Można zastąpić placeholder stylizacji z tych selektorów psuedo:

::-webkit-input-placeholder { 
    color: #D6D6D0; 
} 
:-moz-placeholder { 
    color: #D6D6D0; 
} 
::-moz-placeholder { 
    color: #D6D6D0; 
} 
:-ms-input-placeholder { 
    color: #D6D6D0; 
} 

Zrobiłem skrzypce, które daje wyobrażenie: http://jsfiddle.net/bM5AE/

Answer 4

można lepiej użyć zastępczy do wstępnie wypełnić pola, na pisanie znikną, jeśli pole zostanie puste, pole zostanie przywrócone.

<input type="text" name="q" placeholder="SEARCH" id="searchFieldText"> 

A jeśli wan't styl zastępczy

::-webkit-input-placeholder { 
    color: red; 
} 
:-moz-placeholder { /* Firefox 18- */ 
    color: red; 
} 
::-moz-placeholder { /* Firefox 19+ */ 
    color: red; 
} 
:-ms-input-placeholder { 
    color: red; 
} 

Example

Answer 5

hi Wypróbuj poniższy kod będzie działać ....

 $(document).ready(function() { 
      $("#searchFieldText").keypress(function() { 
       $("#searchFieldText").css("color", "#ffffff"); 
      }); 
     });