टेलविंड सीएसएस के साथ फॉर्म डिजाइन करते समय, आप संख्या इनपुट फ़ील्ड से डिफ़ॉल्ट तीर (जिन्हें स्पिनर भी कहा जाता है) को हटाना चाह सकते हैं। ये तीर कस्टम डिज़ाइन में हस्तक्षेप कर सकते हैं और विभिन्न ब्राउज़रों में लगातार स्टाइल करना चुनौतीपूर्ण है।

इस ट्यूटोरियल में, हम पता लगाएंगे कि इनलाइन शैलियों और वैश्विक सीएसएस दृष्टिकोण दोनों के माध्यम से, टेलविंड सीएसएस का उपयोग करके इसे कैसे प्राप्त किया जाए।

समस्या

डिफ़ॉल्ट रूप से, ब्राउज़र तत्वों में वृद्धि और कमी वाले तीर जोड़ते हैं। कार्यात्मक होते हुए भी, ये तीर अक्सर कस्टम डिज़ाइन से टकराते हैं और विभिन्न ब्राउज़रों में समान रूप से स्टाइल करना मुश्किल हो सकता है।

समाधान

हम इन तीरों को हटाने और स्वच्छ, अनुकूलित संख्या इनपुट बनाने के लिए टेलविंड सीएसएस उपयोगिता कक्षाओं का उपयोग करेंगे। हम यह भी देखेंगे कि बड़ी परियोजनाओं के लिए इस स्टाइल को विश्व स्तर पर कैसे लागू किया जाए।

इनलाइन दृष्टिकोण

आइए एक उदाहरण से शुरू करें जो इनलाइन टेलविंड कक्षाओं का उपयोग करता है:

तीरों को हटाने के लिए प्रमुख वर्ग हैं:

• [प्रकटन:टेक्स्टफ़ील्ड]: फ़ायरफ़ॉक्स में डिफ़ॉल्ट स्टाइल को हटाता है।
• [&::-वेबकिट-बाहरी-स्पिन-बटन]:उपस्थिति-कोई नहीं: वेबकिट ब्राउज़र में बाहरी स्पिन बटन को हटाता है।
• [&::-वेबकिट-इनर-स्पिन-बटन]:उपस्थिति-कोई नहीं: वेबकिट ब्राउज़र में इनर स्पिन बटन को हटाता है।

वैश्विक दृष्टिकोण

बड़ी परियोजनाओं के लिए, आप इस स्टाइल को सभी नंबर इनपुट पर लागू करना चाह सकते हैं। आप अपनी वैश्विक सीएसएस फ़ाइल में शैलियाँ जोड़कर ऐसा कर सकते हैं:

1. अपने फ्रेमवर्क और सेटअप के आधार पर अपनी ग्लोबल.सीएसएस फ़ाइल (या समकक्ष, जैसे ऐप.सीएसएस या स्टाइल्स.सीएसएस) खोलें।

2. निम्नलिखित सीएसएस जोड़ें:
   

/* In your global.css file */
@layer utilities {
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input[type="number"] {
    -moz-appearance: textfield;
  }
}

1. सुनिश्चित करें कि यह सीएसएस फ़ाइल आपकी मुख्य टेलविंड सीएसएस फ़ाइल में आयात की गई है या आपके HTML में शामिल है।

इन वैश्विक शैलियों को जोड़ने के बाद, आप अपने HTML को सरल बना सकते हैं:

ध्यान दें कि हमने व्यक्तिगत इनपुट से तीर हटाने वाली कक्षाओं को हटा दिया है, क्योंकि अब उन्हें वैश्विक सीएसएस द्वारा नियंत्रित किया जाता है।

कस्टम तीर जोड़ना

डिफ़ॉल्ट तीरों को हटाने से डिज़ाइन की स्थिरता में सुधार होता है, आप बेहतर उपयोगकर्ता अनुभव के लिए कस्टम वृद्धि/कमी बटन जोड़ना चाह सकते हैं। हमारे फ़ॉर्म के डिज़ाइन से मेल खाने वाले कस्टम तीर बनाने का तरीका यहां बताया गया है:

  Quantity
  

    
    

      
        
      
      
        
      
    
  

आइए इस कार्यान्वयन के प्रमुख घटकों का विश्लेषण करें:

1. हम अपने कस्टम बटन की पूर्ण स्थिति की अनुमति देने के लिए इनपुट को सापेक्ष-स्थिति वाले डिव में लपेटते हैं।

2. इनपुट फ़ील्ड अपनी मूल शैली को बरकरार रखती है, जिसमें डिफ़ॉल्ट तीरों को हटाने के लिए कक्षाएं भी शामिल हैं:
   

   [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none

1. हम अपने कस्टम बटनों को शामिल करने के लिए पूर्ण स्थिति के साथ एक div जोड़ते हैं:

   





यह बटनों को इनपुट के दाईं ओर स्थित करता है और उन्हें लंबवत रूप से केन्द्रित करता है।


प्रत्येक बटन को इनपुट के साथ मिश्रित करने के लिए स्टाइल किया गया है:



   






h-full बटन को इनपुट की ऊंचाई भरने देता है।

बॉर्डर-एल बटनों के बीच एक सूक्ष्म विभाजक जोड़ता है।

टेक्स्ट-ग्रे-500 और होवर: टेक्स्ट-स्काई-500 होवर पर एक रंग परिवर्तन प्रदान करते हैं जो हमारे फॉर्म की फोकस स्थिति से मेल खाता है।



हम ऊपर और नीचे तीरों के लिए एसवीजी आइकन का उपयोग करते हैं, जिसका आकार w-4 h-4 के साथ उचित है।
ऑनक्लिक इवेंट इनपुट मान बदलने के लिए जावास्क्रिप्ट के स्टेपअप() और स्टेपडाउन() तरीकों का उपयोग करते हैं:




   onclick="document.getElementById('quantity').stepUp()"
   onclick="document.getElementById('quantity').stepDown()"





  
  
  महत्वपूर्ण विचार


कुछ चीजें हैं जिन पर आपको विचार करना चाहिए:


तीरों को हटाने से उन उपयोगकर्ताओं पर असर पड़ सकता है जो उन पर भरोसा करते हैं। यदि आवश्यक हो तो वैकल्पिक वृद्धि/कमी के तरीके प्रदान करने पर विचार करें।
यह समाधान आधुनिक ब्राउज़रों में काम करता है। पुराने ब्राउज़रों को अतिरिक्त सीएसएस या जावास्क्रिप्ट की आवश्यकता हो सकती है।



  
  
  निष्कर्ष


इसे इनलाइन या वैश्विक स्तर पर लागू करके, आप अपने प्रोजेक्ट में नंबर इनपुट से डिफ़ॉल्ट तीरों को प्रभावी ढंग से हटा सकते हैं।

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

हैप्पी कोडिंग!