प्लेसहोल्डर वाले इनपुट टेक्स्टबॉक्स के लिए स्टाइल कस्टमाइज़ करने के लिए, हम CSS के :placeholder-shown प्सूडो-क्लास का उपयोग करते हैं।
उदाहरण 1
निम्न उदाहरण CSS :placeholder-shown प्सूडो-क्लास को दर्शाते हैं।
<!DOCTYPE html> <html> <head> <style> input:placeholder-shown { border-color: dodgerblue; } input:nth-of-type(even):placeholder-shown { border-color: olivedrab; } </style> </head> <body> <input type="text" placeholder="dodgerblue"> <input type="email" placeholder="olivedrab"> </body> </html>
आउटपुट
यह निम्न परिणाम उत्पन्न करेगा:
उदाहरण 2
<!DOCTYPE html> <html> <head> <style> input:placeholder-shown { border-color: orange; background: powderblue; } </style> </head> <body> <input type="radio" checked> <input type="email" placeholder="orange"> <input type="text"> </body> </html>
आउटपुट
यह निम्न परिणाम उत्पन्न करेगा:
