Làm thế nào để thay đổi màu giữ chỗ trên tiêu điểm?

Question

Làm cách nào để thay đổi màu của trình giữ chỗ khi lấy nét trường nhập? Tôi sử dụng css này để đặt màu mặc định, nhưng làm cách nào để thay đổi màu trên tiêu điểm?

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

Hãy thử điều này, điều này sẽ làm việc:

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

Dưới đây là một ví dụ: http://jsfiddle.net/XDutj/27/

Answer 2

Hãy thử điều này:

HTML

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

CSS

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

Answer 3

tôi đã tìm thấy giải pháp này với JQuery:

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

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

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

    }); 

với css này:

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

Answer 4

Ngoài Pranav câu trả lời tôi tinh chế mã với khả năng tương thích textarea :

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

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

Answer 5

Từ Firefox 19: Lớp giả: -moz-placeholder phù hợp với các phần tử form với thuộc tính placeholder đã bị loại bỏ, và phần tử giả - :: - moz-placeholder đã được thêm vào.

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

Answer 6

Sử dụng sao * để chọn tất cả mọi thứ

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


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


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


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

Answer 7

Bạn có thể tạo ra một thiết kế hoạt hình placeholder vật liệu co lại trên đầu khi lĩnh vực đầu vào là tập trung.

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

Về cơ bản, trường nhãn sẽ hoạt động như trình giữ chỗ. Chúng ta có thể làm điều này chỉ bằng cách sử dụng css. Giải thích đây http://www.voidtricks.com/create-material-design-animated-placeholder/

Answer 8

Sau đây làm việc cho tôi:

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