सीएसएससँग शैली फारमहरू

तपाईंको वेबसाइट को हेरविचार सुधार गर्न सिक्नुहोस्

तपाइँको वेबसाइटको नजर सुधार गर्न सीएसएससँग शैली फारमहरू कसरी गर्ने तरिका हो भनेर सिक्नुहोस्। एचटीएमएल फारमहरू धेरै वेब पृष्ठहरूमा अग्लुनेस्ट चीजहरू बीचमा हुन्छन्। तिनीहरू अक्सर उबाऊ र प्रयोगात्मक हुन्छन् र शैलीको मार्गमा धेरै प्रस्ताव गर्दैनन्।

CSS सँग, यसले परिवर्तन गर्न सक्छ। थप उन्नत फारम ट्यागको साथ CSS लाई संयोजनले केही सुन्दर लग फारमहरू प्रदान गर्न सक्छ।

रङ परिवर्तन गर्नुहोस्

जस्तै पाठको रूपमा, तपाईं फारम तत्वहरूको अग्रभूमि र पृष्ठभूमि रंग परिवर्तन गर्न सक्नुहुनेछ।

लगभग प्रत्येक फाराम तत्वको पृष्ठभूमि रङ परिवर्तन गर्न एक सरल तरिका इनपुट ट्यागमा पृष्ठभूमि-रङ गुण प्रयोग गर्न हो। उदाहरणको लागि, यो कोड सबै तत्वहरूमा नीलो पृष्ठभूमि रङ (# 9cf) लागू हुन्छ।

इनपुट {
पृष्ठभूमि रंग: # 9cf;
रंग: # 000;
}

केवल निश्चित फारम तत्वहरूको पृष्ठभूमि रङ परिवर्तन गर्न, केवल textare थप गर्नुहोस् र शैलीमा चयन गर्नुहोस्। उदाहरणका लागि:

input, textarea, select {
पृष्ठभूमि रंग: # 9cf;
रंग: # 000;
}

यदि तपाईं आफ्नो पृष्ठभूमि रङ अन्धकार गर्नुहुन्छ भने पाठ रङ परिवर्तन गर्न निश्चित हुनुहोस्। कन्ट्रास्ट रङले फारम तत्त्वहरूलाई अझ बढी मान्य बनाउन मद्दत गर्दछ। उदाहरणका लागि, गाढा रातो रातो रङको पाठमा पाठ रङ सेतो छ भने धेरै सजिलै पढ्न सकिन्छ। उदाहरणका लागि, यो कोड रातो पृष्ठभूमिमा सेतो पाठ राख्छ।

input, textarea, select {
पृष्ठभूमि रंग: # c00;
रंग: #fff;
}

तपाइँले फारम ट्यागमा पृष्ठभूमि रङ पनि राख्न सक्नुहुनेछ। याद गर्नुहोस् कि फारम ट्याग ब्लक तत्व हो , त्यसैले रंग सम्पूर्ण आयताकारमा भर पर्दछ, न केवल तत्वका स्थानहरू।

तपाईं एक ब्लक तत्वमा पहेंलो पृष्ठभूमि थप्न क्षेत्र क्षेत्र खडा गर्न, जस्तै यो:

form {
पृष्ठभूमि रंग: # fc;
}

सीमाहरू थप्नुहोस्

रंगहरू जस्तै, तपाईं विभिन्न ढाँचा तत्वहरूको सीमा परिवर्तन गर्न सक्नुहुनेछ। तपाईं सम्पूर्ण फारम वरिपरि एक सिमाना जोड्न सक्नुहुनेछ। प्याडिंग थप्न निश्चित हुनुहोस्, वा तपाईंको फाराम तत्वहरू सीमाको छेउमा दाँया माथि जाम गरिनेछ।

यहाँ 5 पिक्सल कालो सिमानाको लागि कोडको एक उदाहरण हो 5 पिक्सेल प्याडिङको साथ:

form {
सीमा: 1px ठोस # 000;
padding: 5px;
}

तपाईं केवल फारम आफै भन्दा बढी सीमाहरू राख्न सक्नुहुन्छ। इनपुट वस्तुहरू सिमाना परिवर्तन गर्न तिनीहरूलाई रोक्न:

इनपुट {
किनारा: 2px ड्यास दुर्घटना # c00;
}

सावधान रहनुहोस् जब तपाईं इनपुट बाकसमा सिमाना राख्नुहुन्छ जब तिनीहरू इनपुट बाकसहरू जस्तै कम देखिन्छन, र केही व्यक्तिहरूले त्यो फारममा भर्न सक्न सक्दछन्।

गहिराई विशेषताहरू

तपाईंको फारम तत्वहरू विचार र केहि सीएसएस संग एक साथ राखेर, तपाईं एक राम्रो लग फारम सेट अप गर्न सक्नुहुन्छ जुन तपाईंको साइट को डिजाईन र लेआउट को पूरा गर्दछ।