thay đổi màu phông chữ trong hộp văn bản bằng CSS khi giá trị được nhập vào hộp

Question

Tôi có một hộp văn bản, hoạt động như một hộp tìm kiếm trên trang của tôi. Tôi điền trước trường bằng từ 'TÌM KIẾM' có màu văn bản mặc định là # D6D6D0.

Sử dụng CSS, bạn có thể thay đổi màu văn bản thành #FFFFFF khi có ai đó nhập văn bản vào hộp không?

<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

Lớp giả tập trung nên việc

#searchFieldText:focus { 
    color: #fff; 
} 

Answer 2

Sử dụng kính giả :focus sẽ thực hiện thủ thuật cho bạn.

#searchFieldText:focus{ 
    color:#fff; 
} 

tôi cũng khuyên bạn nên sử dụng thuộc tính mới placeholder cho lĩnh vực đầu vào mà sẽ làm một số kỳ diệu cho bạn (cần phải nhận thức được sự ủng hộ tuy nhiên).

See the example

Answer 3

Sử dụng :focus sẽ chỉ áp dụng khi hộp hiện đang trong tâm, khi người dùng đi ra của hộp văn bản màu sắc sẽ trở lại.

Tôi khuyên bạn nên sử dụng thuộc tính placeholder, ghi đè kiểu dáng cho placeholder thành màu #D6D6D0 bạn muốn và áp dụng kiểu bạn muốn trên hộp văn bản.

Bạn có thể ghi đè lên phong cách placeholder với những selectors psuedo:

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

tôi đã thực hiện một fiddle cung cấp cho bạn một ý tưởng: http://jsfiddle.net/bM5AE/

Answer 4

Bạn có thể sử dụng tốt hơn giữ chỗ để điền trước các lĩnh vực, trên gõ chúng sẽ biến mất, nếu onblur trường trống thì trình giữ chỗ sẽ quay trở lại.

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

Và nếu bạn wan't để tạo kiểu cho placeholder

::-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 Hãy thử đoạn code dưới đây nó sẽ làm việc ....

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