: वैध - सीएसएस-ट्रिक्स

:validचयनकर्ता आप का चयन करने के लिए अनुमति देता है तत्वों है कि, वैध सामग्री होती है के रूप में अपनी द्वारा निर्धारित typeविशेषता। :validCSS चयनकर्ता स्तर 3 युक्ति में "वैधता छद्म चयनकर्ता" के रूप में परिभाषित किया गया है, जिसका अर्थ है कि यह उपयोगकर्ता इनपुट के मूल्यांकन के आधार पर इंटरैक्टिव तत्वों को स्टाइल करने के लिए उपयोग किया जाता है।

इस चयनकर्ता का एक विशेष उपयोग है: उपयोगकर्ता को फीडबैक के साथ प्रदान करना जबकि वे पृष्ठ पर एक फॉर्म के साथ बातचीत कर रहे हैं। नीचे दिया गया उदाहरण "ईमेल" फ़ील्ड को लाल या हरे रंग में बदलने के लिए CSS का उपयोग करता है, सामग्री के वैध ईमेल पता पैटर्न से मेल खाता है या नहीं, इसका जवाब:

पेन देखें: CodePen पर क्रिस कॉयर (@chriscoyier) द्वारा मान्य और अमान्य इनपुट

ध्यान दें कि फ़ील्ड में कोई सामग्री न होने पर भी पहला ("ईमेल") हरा-वैध कैसे है । ऐसा इसलिए है क्योंकि इनपुट वैकल्पिक है, इसलिए इसे खाली छोड़ देने से वैध रूप सबमिट हो जाएगा। इस व्यवहार को ठीक करने के लिए, दूसरे में "आवश्यक" विशेषता होती है, जिसका अर्थ है कि रिक्त क्षेत्र में अमान्य फ़ॉर्म सबमिट किया जाएगा।

ब्याज के अंक

• :validअन्य छद्म चयनकर्ताओं के साथ "जंजीर" किया जा सकता है: :focusउपयोगकर्ता को टाइप करने के लिए केवल उपयोगकर्ता को टाइप करने, :beforeया :afterअधिक उपयोगकर्ता प्रतिक्रिया प्रदान करने के लिए आइकन या टेक्स्ट उत्पन्न करने के लिए, या input(value="")केवल सामग्री इनपुट वाले इनपुट फ़ील्ड को मान्य करने के लिए विशेषता चयनकर्ताओं को पसंद करने के लिए।

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

क्रोम	सफारी	फ़ायर्फ़ॉक्स	ओपेरा	अर्थात	एंड्रॉयड	आईओएस
10.0+	5.0+ है	4.0+ है	10.0+	10+	5+	2+

:validCSS चयनकर्ता मॉड्यूल 3 में पेश किया गया था, जिसका अर्थ है कि पुराने संस्करण के ब्राउज़र इसका समर्थन नहीं करते हैं। हालांकि, आधुनिक ब्राउज़र समर्थन बेहतर हो रहा है। यदि आपको पुराने ब्राउज़र समर्थन की आवश्यकता है, या तो पॉलीफ़िल, या गैर-महत्वपूर्ण तरीकों से इन चयनकर्ताओं का उपयोग करें á la प्रगतिशील वृद्धि, जो अनुशंसित है।