:: चयन - सीएसएस-ट्रिक्स

अपने कर्सर का उपयोग करके इस वाक्य का चयन करें। ध्यान दें कि जब आप पाठ का चयन करते हैं, तो पृष्ठभूमि रंग अंतरिक्ष को भरता है? आप चुनिंदा टेक्स्ट के बैकग्राउंड कलर और कलर को स्टाइल करके बदल सकते हैं ::selection। इस छद्म तत्व को स्टाइल करना आपकी साइटों के रंग योजना के उपयोगकर्ता-चयनित पाठ के मिलान के लिए बहुत अच्छा है।

p::-moz-selection ( color: red) p::selection ( color: red; )

ध्यान दें कि इस छद्म तत्व के लिए वाक्यविन्यास में डबल कोलन आवश्यक है, इसके बावजूद कि अन्य छद्म तत्व एक एकल बृहदान्त्र को स्वीकार करते हैं।

जैसा कि ऊपर देखा गया है, आप ::selectionव्यक्तिगत तत्वों पर स्टाइल कर सकते हैं । आप अपने स्टाइलशीट में नंगे छद्म तत्व को गिराकर पूरे पृष्ठ को स्टाइल कर सकते हैं।

::-moz-selection ( background: yellow; ) ::selection ( background: yellow; )

केवल तीन गुण हैं जो ::selectionइसके साथ काम करेंगे:

• color
• background( background-color, background-image)
• text-shadow

CodePen पर क्रिस कॉयर (@chriscoyier) द्वारा पेन :: चयन परीक्षण देखें।

यदि आप ::selectionकिसी ऐसी संपत्ति के साथ स्टाइल करने की कोशिश करते हैं जो सूची में नहीं है, तो उस संपत्ति को नजरअंदाज कर दिया जाएगा। यह backgroundउस सूची में देखने में मुश्किल हो सकता है क्योंकि संपत्ति केवल एक रंग प्रस्तुत करने पर उपयोग की ::selectionजाएगी और यह एक पृष्ठभूमि छवि या ढाल प्रस्तुत नहीं करेगी।

यह भी कोशिश न करें:

p::-moz-selection, p::selection ( color: red; )

जब ब्राउज़रों को एक ऐसे हिस्से का चयन होता है जिसे वे नहीं समझते हैं, तो वे पूरी चीज़ को छोड़ देते हैं, इसलिए यह हर समय विफल रहेगा।

चयन के दौरान सबसे उपयोगी उपयोगों में ::selectionसे एक बंद है text-shadow। A text-shadowचयन की पृष्ठभूमि के रंग के साथ टकरा सकता है और पाठ को पढ़ना मुश्किल बना सकता है। text-shadow: none;चयन के दौरान पाठ को स्पष्ट और आसान बनाने के लिए सेट करें ।

CodePen पर क्रिस कॉयर (@chriscoyier) द्वारा पेन :: चयन टेक्स्ट-शैडो देखें।

फैंसी :: चयन

सैस, या किसी अन्य प्रीप्रोसेसर के साथ जोड़ा गया, आप वास्तव में अच्छा प्रभाव डाल सकते हैं ::selection। नीचे डेमो में पाठ का चयन करें:

आप देख सकते हैं कि कुछ ब्राउज़रों में प्रभाव इतना आसान नहीं है। आइए उस डेमो को नीचे दर्ज करें: जो चीजें संभव हैं, लेकिन शायद सिर्फ मनोरंजन के लिए।

एक और गूंगा-लेकिन मजेदार छोटी चाल चयनित पाठ के माध्यम से एक छवि का खुलासा कर रही है।

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

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

डेस्कटॉप

क्रोम	फ़ायर्फ़ॉक्स	अर्थात	एज	सफारी
४	2 *	९	१२	3.1

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

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