CSS इनपुट टाइप सिलेक्टर: फॉर्म एलिमेंट्स को स्टाइल करें

जब हम फॉर्म बना रहे होते हैं, तो हम उन्हें अपने ग्राहकों या ग्राहकों के लिए अद्वितीय और आकर्षक बनाना चाहते हैं। यह सच है कि हम अपने फॉर्म को कैसे प्रस्तुत करते हैं, यह उपयोगकर्ता अनुभव को बहुत बेहतर बनाता है। अपने फॉर्म को स्टाइल करने के लिए, हम विभिन्न CSS इनपुट टाइप सिलेक्टर्स का उपयोग करते हैं।

सिंटैक्स और उदाहरण

input[type="text"] { /* स्टाइल्स यहाँ */ }

टेक्स्ट इनपुट्स स्टाइल करना

पहली चीज़ जो हम कर सकते हैं वह है अपने इनपुट्स और लेबल्स के फ़ॉन्ट साइज़ को स्टाइल करना:

input, label { font-size: 2rem; padding: 1rem; }

टेक्स्ट इनपुट और ईमेल को स्टाइल करें:

input[type="text"] {
  border: 0;
  border-bottom: 0.3rem solid mediumspringgreen;
}
input[type="email"] {
  border: 0;
  border-left: 0.3rem solid mediumspringgreen;
  border-radius: 0.5rem;
}

ट्रिक यह है कि हम बॉर्डर्स को हटा दें और केवल वही विशिष्ट बॉर्डर जोड़ें जिसकी हमें आवश्यकता है।

ड्रॉपडाउन (सेलेक्ट) के लिए चेतावनी

एक और इनपुट जिसे हम स्टाइल कर सकते हैं वह है ड्रॉपडाउन। लेकिन एक चेतावनी है। यदि हम input[type="select"] करते हैं तो यह हमारे ड्रॉपडाउन का चयन नहीं करेगा। हमें ड्रॉपडाउन का चयन करने के लिए select कीवर्ड का उपयोग करना होगा।

select {
  padding: 2rem;
  font-size: 2rem;
  width: 25rem;
  border: none;
  border-bottom: 0.3rem solid mediumspringgreen;
}

अन्य इनपुट स्टाइलिंग

नंबर और डेट इनपुट्स पर समान स्टाइल पैटर्न लागू करें:

input[type="number"], input[type="date"] {
  border: 0;
  border-bottom: 0.3rem solid mediumspringgreen;
}

CSS के कुछ ही स्ट्रोक्स के साथ, और बहुत आसान सिलेक्टर्स का उपयोग करके, हम अपने इनपुट्स को एक नया रूप देने में सक्षम हैं!

सामान्य इनपुट टाइप्स जिन्हें स्टाइल किया जा सकता है

• text, email, password, number, date, tel, url, search
• checkbox, radio (सीमित स्टाइलिंग)
• file (बहुत सीमित स्टाइलिंग)
• submit, button, reset
• select (इनपुट नहीं, लेकिन फॉर्म एलिमेंट)
• textarea (इनपुट नहीं, लेकिन फॉर्म एलिमेंट)

निष्कर्ष

input[type="type"] सिलेक्टर फॉर्म एलिमेंट्स को उनके टाइप के आधार पर टार्गेट करने का एक शक्तिशाली तरीका प्रदान करता है। सुसंगत स्टाइलिंग पैटर्न (जैसे केवल बॉटम बॉर्डर, विशिष्ट रंग) के साथ संयुक्त, आप न्यूनतम कोड के साथ साफ, आधुनिक दिखने वाले फॉर्म बना सकते हैं। आगे बढ़ें और कोडपेन में अधूरे इनपुट्स पर अपनी इच्छानुसार कोई भी स्टाइल लागू करें!