:user-invalidएक सीएसएस छद्म वर्ग सीएसएस में प्रस्ताव किया जा रहा है कि चयनकर्ता स्तर 4 काम मसौदा है कि है कि क्या मूल्य के रूप में एक से डाला, वह मान्य उपयोगकर्ता के है जब क्या में स्वीकृत मान के रूप में निर्दिष्ट किया जाता है के खिलाफ जाँच की आधारित चयन एक ऐसा फ़ॉर्म तत्व अंतिम मार्क्स के बाद HTML मार्कअप उस इनपुट से परे के फॉर्म के साथ इंटरैक्ट करता है। वास्तव में, :user-invalid"उपयोगकर्ता सहभागिता छद्म वर्ग" कहा गया है क्योंकि यह एक तत्व का चयन करने में एक उपयोगकर्ता कार्रवाई की पहचान करने में अद्वितीय है।
संख्यात्मक फ़ील्ड के साथ मूल रूप के लिए निम्न HTML मार्कअप लें:
इनपुट के लिए HTML मार्कअप द्वारा सांख्यिक श्रेणी सेट के बीच है 1और 10डिफ़ॉल्ट मान लेकिन करने के लिए सेट किया गया है 11। अर्थात फॉर्म लोड होते ही मान अमान्य हो जाता है।
हालांकि, :user-invalidछद्म वर्ग तब तक प्रभावी नहीं होगा जब तक कि उपयोगकर्ता ने वास्तव में क्षेत्र में प्रवेश करने से परे फॉर्म के साथ बातचीत नहीं की हो। वह अंत: क्रिया :user-invalidऔर उसके बीच का अंतर है :invalid। एक ही सिद्धांत प्रवेश किए गए प्रपत्र मानों के लिए लागू होता है जो द्वारा निर्धारित किए जाते हैं :in-range, :out-of-rangeऔर :required।
एक बार उपयोगकर्ता द्वारा दर्ज किया गया मान अमान्य प्रविष्टि के लिए निर्धारित होता है, हम तत्व का चयन कर सकते हैं:
input:user-invalid ( color: red; )निम्नलिखित छवि बीच के HTML उदाहरण के आधार पर :valid, विभिन्न राज्यों को दर्शाती :user-invalidहै।
यहाँ के साथ भ्रमित करने वाली बात यह है कि कैसे निकटता से संबंधित हैं :invalidऔर :user-invalidहैं। यदि एक साथ उपयोग किया जाता है, तो दोनों को अलग करना कठिन हो सकता है:
input:invalid ( color: red; ) input:user-invalid ( color: red; )
:invalid(बीच में) और एक अमान्य मान एक उपयोगकर्ता (दाएं) द्वारा दर्ज किए गए कठिन हो सकता है अलग करने के लिए
एक के बाद एक का उपयोग करना या दोनों के बीच अलग स्टाइल होना वास्तविक जीवन में उपयोग के मामले में बेहतर उपयोगकर्ता अनुभव साबित हो सकता है।
ब्राउज़र का समर्थन
:user-invalid वर्तमान में समर्थित नहीं है, लेकिन CSS चयनकर्ता स्तर 4 के कार्य मसौदे में प्रस्तावित है।
फ़ायरफ़ॉक्स एक पूर्वनिर्मित गैर-मानक संपत्ति का उपयोग करता है -moz-ui-invalidजो समान मानकों को अपनाता है।
सम्बंधित
:invalid:valid
अधिक जानकारी
- CSS चयनकर्ता स्तर 4 विशिष्टता
- के लिए MDN विशिष्टता
:-moz-ui-invalid