: इन-रेंज - सीएसएस-ट्रिक्स

:in-rangeसीएसएस में छद्म चयनकर्ता इनपुट तत्वों से मेल खाता है जब उनके मूल्य सीमा स्वीकार्य होने के रूप में निर्दिष्ट के भीतर है। यह CSS Selectors Level 4 विनिर्देशन का हिस्सा है जो वर्तमान में Editor's Draft में है।

input:in-range ( border: 5px solid green; )

मेरा मानना ​​है कि यह केवल प्रासंगिक है input(type=number)। रेंज इनपुट उनके न्यूनतम / अधिकतम के मानों की अनुमति नहीं देते हैं और यह किसी अन्य प्रकार के इनपुट पर बहुत अधिक प्रभाव नहीं डालता है। शायद टेक्स्ट-वाई इनपुट के साथ एक अधिकतम गति है, लेकिन अधिकांश ब्राउज़रों में उन पर व्यवहार वैसे भी अधिकतम पिछले प्रविष्टि को रोकने के लिए है।

डेमो

ऊपर दिए गए कोड की तरह, इस इनपुट में एक हरा बॉर्डर होगा जब इसका मूल्य 5 और 10 के बीच होगा।

ब्राउज़र का समर्थन

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम	फ़ायर्फ़ॉक्स	अर्थात	एज	सफारी
५३	50	नहीं न	। ९	10.1

मोबाइल / टेबलेट

Android क्रोम	Android फ़ायरफ़ॉक्स	एंड्रॉयड	iOS सफारी
88	.५	81	10.3

संबंधित गुण

1 जुलाई, 2020 को पंचांग

:क्षेत्र के बहार

input:out-of-range ( border: 5px solid red; ) ज्योफ ग्राहम