सीएसएस फॉर्म
- पिछला पृष्ठ सीएसएस एट्रिब्यूट सेलेक्टर
- अगला पृष्ठ सीएसएस काउंटर
CSS के द्वारा, HTML फॉर्म के आकार को बहुत हद तक सुधारा जा सकता है:
इनपुट फील्ड के स्टाइल को सेट करें
इस्तेमाल करें width एट्रिब्यूट को इनपुट फील्ड की चौड़ाई निर्धारित करता है:
उदाहरण
input {
width: 100%;
}
उपरोक्त उदाहरण सभी <input> एलिमेंट के लिए लागू होता है। यदि केवल विशेष इनपुट टाइप के स्टाइल को सेट करना है, तो आपको एट्रिब्यूट चयनकर्ता का उपयोग कर सकते हैं:
input[type=text]- केवल टेक्स्ट फील्ड को चुनेगाinput[type=password]- केवल पासवर्ड फील्ड को चुनेगाinput[type=number]- केवल नंबर फील्ड को चुनेगा- आदि...
फील्ड फिल्लिंग
इस्तेमाल करें padding एट्रिब्यूट टेक्स्ट फील्ड के अंदर स्थान जोड़ता है।
सूचना:अगर कई इनपुट हैं, तो आपको बाहरी मार्गिन जोड़ने की जरूरत हो सकती है, ताकि उनके बाहर और अधिक स्थान जोड़ा जा सके:
उदाहरण
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
ध्यान दें कि हमने box-sizing एट्रिब्यूट को border-boxइस तरह करके तो एलिमेंट का कुल चौड़ाई और ऊंचाई अंतिम बॉर्डर को शामिल करती है।
कृपया CSS बॉक्स साइजिंग इस चैप्टर में box-sizing एट्रिब्यूट के बारे में अधिक जानकारी लें।
बॉर्डर वाले इनपुट फील्ड
कृपया border एट्रिब्यूट बॉर्डर की मोटाई और रंग को बदलते हैं और border-radius एट्रिब्यूट के द्वारा गोलाकारता जोड़ सकते हैं:
उदाहरण
input[type=text] {
border: 2px solid red;
border-radius: 4px;
}
यदि केवल नीचे की कंटॉर की जरूरत है, तो border-bottom एट्रिब्यूट:
उदाहरण
input[type=text] {
border: none;
border-bottom: 2px solid red;
}
रंगीन इनपुट फील्ड
कृपया background-color एट्रिब्यूट इनपुट को बैकग्राउंड कोलर जोड़े और color एट्रिब्यूट के द्वारा टेक्स्ट को रंग बदल सकते हैं:
उदाहरण
input[type=text] {
background-color: #3CBC8D;
color: white;
}
फोकस प्राप्त करने वाले इनपुट फील्ड
डिफ़ॉल्ट में, कुछ ब्राउज़र जब फोकस प्राप्त करते हैं (क्लिक करते हैं) तो इनपुट फील्ड के चारों ओर नीला कंटॉर को जोड़ते हैं। आप इनपुट को इसे जोड़कर outline: none; इस व्यवहार को निकालने के लिए。
इस्तेमाल करें :focus सेलेक्टर को इनपुट फील्ड पर फोकस होने पर उसके लिए स्टाइल सेट कर सकता है:
उदाहरण 1
input[type=text]:focus {
background-color: lightblue;
}
पाठबंदुक में क्लिक करें:
उदाहरण 2
input[type=text]:focus {
border: 3px solid #555;
}
पाठबंदुक में क्लिक करें:
चिह्न/इमेज वाले इनपुट
यदि आप इनपुट में चिह्न/इमेज को शामिल करना चाहते हैं, तो background-image गुण को जोड़ा जाता है और background-position गुणों को साथ सेट करें। आगे चलकर, हमने एक बड़े पैडिंग-लेफ्ट (padding-left) जोड़ा है ताकि चिह्न के लिए जगह राखी हो:
उदाहरण
input[type=text] {
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}
एनिमेशन सहित खोज इनपुट
इस उदाहरण में, हमने CSS transition गुण के लिए फोकस प्राप्त करने पर इनपुट खोज फोकस की चौड़ाई के लिए एनिमेशन सेट करता है। बाद में, आपको हमारे CSS ट्रांसिशन एक अध्याय में आपको जाना होगा transition गुण के ज्ञान
उदाहरण
input[type=text] {
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
टेक्सट एरिया का शैली सेट करें
सूचना:इस्तेमाल करें resize यह गुण टेक्सटएरियस को आकार समायोजित करने से रोकता है (दायाँ नीचे के 'ग्रैपर' को निष्क्रिय करता है):
उदाहरण
textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}
चयन सूची का शैली सेट करें
उदाहरण
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
इनपुट बटन का शैली सेट करें
उदाहरण
input[type=button], input[type=submit], input[type=reset] {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
/* सूचना: width: 100% का उपयोग करके पूर्ण चौड़ाई के बटन बनाएं */
CSS बटन स्टाइल सेट करने के बारे में अधिक जानकारी के लिए हमारे CSS बटन शिक्षा
रिस्पांसिव मेनू
TIY संपादक विंडो का आकार समायोजित करें ताकि प्रभाव देखें।स्क्रीन की चौड़ाई 600 पिक्सल से कम होने पर दो स्तम्भ ऊपर से नीचे जगह लें न कि बाईं-दाईं से जगह लें。
अध्यापक: अगले उदाहरण में मीडिया क्वेरी रिस्पांसिव फॉर्म बनाने के लिए आइए।अगले अध्याय में आपको अधिक जानकारी मिलेगी。
- पिछला पृष्ठ सीएसएस एट्रिब्यूट सेलेक्टर
- अगला पृष्ठ सीएसएस काउंटर
