फोकस पर प्लेसहोल्डर रंग कैसे बदलें?

Question

इनपुट फ़ील्ड पर ध्यान केंद्रित करते समय प्लेसहोल्डर का रंग कैसे बदलें? मैं डिफ़ॉल्ट रंग सेट करने के लिए इस सीएसएस का उपयोग करता हूं, लेकिन इसे फ़ोकस पर कैसे बदला जाए?

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

इस प्रयास करें, यह काम करना चाहिए:

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

यहाँ एक उदाहरण है: इस सीएसएस के साथ

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

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

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

    }); 

: http://jsfiddle.net/XDutj/27/

Answer 2

इस प्रयास करें:

एचटीएमएल

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

सीएसएस

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

Answer 3

मैं JQuery के साथ इस समाधान मिल गया है

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

Answer 4

प्रणव जवाब के अलावा मैं पाठ क्षेत्र संगतता के साथ कोड परिष्कृत :

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

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

Answer 5

फ़ायरफ़ॉक्स से 1 9: : -मोज़-प्लेसहोल्डर छद्म-वर्ग जो प्लेसहोल्डर विशेषता के साथ फ़ॉर्म तत्वों से मेल खाता है, हटा दिया गया है, और :: - moz-placeholder छद्म-तत्व इसके बजाय जोड़ा गया है।

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

Answer 6

उपयोग स्टार * सब कुछ

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


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


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


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

Answer 7

चयन करने के लिए आप एक सामग्री डिजाइन एनिमेटेड प्लेसहोल्डर कि शीर्ष पर सिकुड़ता है जब इनपुट क्षेत्र केंद्रित है बना सकते हैं।

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

मूल रूप से लेबल फ़ील्ड प्लेसहोल्डर की तरह कार्य करने जा रहा है। हम केवल सीएसएस का उपयोग कर ऐसा कर सकते हैं। यहाँ http://www.voidtricks.com/create-material-design-animated-placeholder/

Answer 8

समझाया निम्नलिखित मेरे लिए काम किया:

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