सीएसएस फॉर्म
HTML फॉर्म के रूप को CSS के साथ बहुत बेहतर बनाया जा सकता है:
स्टाइलिंग इनपुट फ़ील्ड
widthइनपुट फ़ील्ड की चौड़ाई निर्धारित करने के लिए संपत्ति का उपयोग करें :
उदाहरण
input
{
width: 100%;
}
उपरोक्त उदाहरण सभी <इनपुट> तत्वों पर लागू होता है। यदि आप केवल एक विशिष्ट इनपुट प्रकार को स्टाइल करना चाहते हैं, तो आप विशेषता चयनकर्ताओं का उपयोग कर सकते हैं:
input[type=text]- केवल टेक्स्ट फ़ील्ड का चयन करेगाinput[type=password]- केवल पासवर्ड फ़ील्ड का चयन करेगाinput[type=number]- केवल संख्या क्षेत्रों का चयन करेगा- आदि..
गद्देदार इनपुट
paddingटेक्स्ट फ़ील्ड के अंदर स्थान जोड़ने के लिए प्रॉपर्टी का उपयोग करें ।
युक्ति: जब आपके पास एक के बाद एक कई इनपुट हों, तो आप उनमें से अधिक स्थान जोड़ने के लिए कुछ , जोड़ना भी चाह सकते marginहैं:
उदाहरण
input[type=text]
{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
ध्यान दें कि हमने box-sizingसंपत्ति को
पर सेट किया है border-box। यह सुनिश्चित करता है कि तत्वों की कुल चौड़ाई और ऊंचाई में पैडिंग और अंततः सीमाएं शामिल हैं। हमारे सीएसएस बॉक्स साइजिंग अध्याय में संपत्ति
के बारे में और पढ़ें ।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फ़ोकस होने पर इनपुट फ़ील्ड के साथ कुछ करने के लिए चयनकर्ता का उपयोग करें :
उदाहरण
input[type=text]:focus
{
background-color: lightblue;
}
उदाहरण
input[type=text]:focus
{
border: 3px solid #555;
}
आइकन/छवि के साथ इनपुट
यदि आप इनपुट के अंदर एक आइकन चाहते हैं, तो संपत्ति का उपयोग करें background-imageऔर इसे background-positionसंपत्ति के साथ रखें। यह भी ध्यान दें कि हम आइकन के स्थान को आरक्षित करने के लिए एक बड़ा बायां पैडिंग जोड़ते हैं:
उदाहरण
input[type=text]
{
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat:
no-repeat;
padding-left: 40px;
}
एनिमेटेड खोज इनपुट
इस उदाहरण में हम 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;
}
/* Tip: use width: 100% for full-width buttons */
CSS के साथ बटनों को स्टाइल करने के तरीके के बारे में अधिक जानकारी के लिए, हमारे CSS Buttons Tutorial को पढ़ें ।
उत्तरदायी प्रपत्र
प्रभाव देखने के लिए ब्राउज़र विंडो का आकार बदलें। जब स्क्रीन 600px से कम चौड़ी हो, तो दोनों स्तंभों को एक-दूसरे के बगल में रखने के बजाय एक-दूसरे के ऊपर स्टैक करें।
उन्नत: निम्न उदाहरण एक प्रतिक्रियाशील प्रपत्र बनाने के लिए मीडिया प्रश्नों का उपयोग करता है। इसके बारे में आप बाद के अध्याय में जानेंगे।