इस मैनुअल में, हम CSS का उपयोग करके इनपुट प्लेसहोल्डर का रंग बदलने के लिए विभिन्न तरीकों की व्याख्या करेंगे।
विधि 1: '::प्लेसहोल्डर' चयनकर्ता का उपयोग करके इनपुट प्लेसहोल्डर रंग बदलें
सीएसएस ' :: प्लेसहोल्डर चयनकर्ता का उपयोग प्लेसहोल्डर टेक्स्ट के साथ प्रपत्र तत्वों का चयन करने के लिए किया जाता है। इसका उपयोग प्लेसहोल्डर टेक्स्ट को बदलने के लिए किया जा सकता है। इसके अतिरिक्त, आप इस चयनकर्ता का उपयोग इनपुट प्लेसहोल्डर के रंग को संशोधित करने के लिए कर सकते हैं।
वाक्य - विन्यास
:: प्लेसहोल्डर का सिंटैक्स इस प्रकार है:
:: प्लेसहोल्डर {
रंग : मूल्य
}
की जगह ' मूल्य ”, आप हमारी पसंद के अनुसार इनपुट प्लेसहोल्डर का रंग सेट कर सकते हैं।
आइए व्यावहारिक उदाहरण पर चलते हैं, जहां हम इनपुट प्लेसहोल्डर का रंग बदलेंगे।
उदाहरण
इनपुट प्लेसहोल्डर का रंग बदलने के लिए, सबसे पहले, हम <इनपुट> टैग का उपयोग करके एक इनपुट तत्व बनाएंगे और इनपुट के प्रकार को 'के रूप में सेट करेंगे' मूलपाठ ' इसके बाद, इनपुट प्लेसहोल्डर के टेक्स्ट को “के रूप में सेट करें” प्रवेश करना तुम्हारा नाम '
एचटीएमएल
< तन >< इनपुट प्रकार = 'मूलपाठ' प्लेसहोल्डर = 'अपना नाम दर्ज करें' >
< / तन >
दिए गए कोड का आउटपुट है:
इनपुट प्लेसहोल्डर का डिफ़ॉल्ट रंग ऊपर दी गई छवि में दिखाया गया है।
अब, हम CSS की ओर बढ़ते हैं और उपयोग करते हैं “ :: प्लेसहोल्डर 'इनपुट प्लेसहोल्डर के टेक्स्ट को एक्सेस करने के लिए और उसके रंग को' के रूप में सेट करने के लिए आरजीबी (17, 0, 255) '
सीएसएस
:: प्लेसहोल्डर {रंग : आरजीबी ( 17 , 0 , 255 ) ;
}
जैसा कि आप देख सकते हैं, जोड़े गए इनपुट प्लेसहोल्डर का रंग बदलकर नीला कर दिया गया है:
इनपुट प्लेसहोल्डर का रंग बदलने का एक और तरीका है। चलो पता करते हैं।
विधि 2: '::-वेबकिट-इनपुट-प्लेसहोल्डर' छद्म-वर्ग तत्व का उपयोग करके इनपुट प्लेसहोल्डर रंग बदलें
' :: - वेबकिट-इनपुट-प्लेसहोल्डर 'छद्म वर्ग तत्व मुख्य रूप से एक प्रपत्र तत्व के प्लेसहोल्डर पाठ का प्रतिनिधित्व करता है। प्लेसहोल्डर टेक्स्ट के रूप को अनुकूलित करने के लिए इसका उपयोग थीम डिजाइनरों और डेवलपर्स द्वारा किया जा सकता है। इसके अतिरिक्त, निर्दिष्ट तत्व का उपयोग करके उपयोगकर्ता इनपुट प्लेसहोल्डर के रंग को संशोधित कर सकता है।
वाक्य - विन्यास
::-वेबकिट-इनपुट-प्लेसहोल्डर का सिंटैक्स इस प्रकार दिया गया है:
:: -वेबकिट-इनपुट-प्लेसहोल्डर {रंग : मूल्य
}
की जगह ' मूल्य ”, आप इनपुट प्लेसहोल्डर का रंग सेट कर सकते हैं।
आइए उपरोक्त चर्चा किए गए छद्म-वर्ग तत्व को समझने के लिए उदाहरण की ओर बढ़ते हैं।
उदाहरण
सीएसएस फ़ाइल में, 'का उपयोग करें' ::-वेबकिट-इनपुट-प्लेसहोल्डर 'छद्म वर्ग तत्व और रंग के मान को' के रूप में निर्दिष्ट करें आरजीबी (255, 13, 13) ':
:::: -वेबकिट-इनपुट-प्लेसहोल्डर {रंग : आरजीबी ( 255 , 13 , 13 ) ;
}
उत्पादन
यहां, आप देख सकते हैं कि इनपुट प्लेसहोल्डर का डिफ़ॉल्ट रंग बदल गया है।
निष्कर्ष
इनपुट प्लेसहोल्डर का रंग 'का उपयोग करके बदला जाता है' :: प्लेसहोल्डर 'चयनकर्ता और' :: - वेबकिट-इनपुट-प्लेसहोल्डर 'छद्म वर्ग तत्व। इसका उपयोग करके आप इनपुट प्लेसहोल्डर का डिफ़ॉल्ट रंग बदल सकते हैं। इस लेख में, हमने CSS गुणों का उपयोग करके इनपुट प्लेसहोल्डर का रंग बदलने से संबंधित प्रक्रिया को समझाया है।