खाली होने पर टेक्स्ट फ़ील्ड इनपुट करने के लिए विभिन्न शैलियों को लागू करें (सीएसएस का उपयोग करके)?

Question

उदाहरण के लिए, ताज़ा लोड किए गए फॉर्म में <input type="text"> होता है जिसमें एक हरा पृष्ठभूमि रंग होता है। एक बार जब उपयोगकर्ता फ़ील्ड में मूल्य डालता है, तो मैं इसके बजाय रंगीन नीला होना चाहता हूं।

क्या यह पूरी तरह से सीएसएस का उपयोग करके इसे पूरा करना संभव है? मैं समझता हूं कि input[type='text'][value] चयनकर्ता है। हालांकि, यह लोड होने के बाद उपयोगकर्ता द्वारा बनाए गए फॉर्म में किए गए किसी भी बदलाव को प्रतिबिंबित नहीं करता है, इसलिए यदि कोई मूल्य के साथ लोड किया गया फॉर्म, तो उपयोगकर्ता द्वारा किए गए कार्यों के बावजूद यह अपरिवर्तित रहेगा।

Answer 1

आप पाठ फ़ील्ड required विशेषता दे सकता है:

<input type="text" required /> 

और फिर सीएसएस के साथ वैधता के लिए जाँच:

input:invalid { background: green; } 

या विपरीत (केवल विभिन्न पुराने ब्राउज़र):

input:valid { background: blue; } 

Answer 2

आप केवल जावास्क्रिप्ट का उपयोग कर ऐसा कर सकते हैं। Here's an example जो jQuery का उपयोग करता है।

यदि आप को केवल focus पर बदलना चाहते हैं, तो आप उपयुक्त नाम :focus छद्म चयनकर्ता का उपयोग कर सकते हैं। Here's an example of this।