2011-08-03 24 views
7

जब आप ब्राउज़र में टेक्स्ट का चयन करते हैं, तो अक्सर पाठ के पीछे पृष्ठभूमि को नीले रंग में रंग बदलते हैं। इस रंग को दूसरे में कैसे बदलें?चयन का रंग बदलें

उत्तर

10

आप selection छद्म-तत्व की तलाश में हैं।

::-moz-selection{ background: #000; color:#fff;} 
::selection { background:#000; color:#fff; } 

इसके अलावा, एक साइड नोट के रूप में। यदि आप अपनी साइट पर टेक्स्ट-छाया का उपयोग करने की योजना बना रहे हैं, तो मैं text-shadow:none; को अपने ::selection स्टाइल में जोड़ने की अनुशंसा करता हूं। जैसा कि आप this फीडल में देख सकते हैं, यह आंखों पर वास्तव में कठिन है।

+0

यह आसान अगर आप सही नाम "छद्म तत्व" का उपयोग कहने के लिए बनाता है की कोशिश करो। – BoltClock

+0

ध्यान दें कि यह IE में काम नहीं करेगा <9. –

+0

@ बोल्टक्लॉक आह, लेकिन बहुत कम मजेदार एक्सडी। फिर भी, मैं इसे सही शब्दों में बदलना सुनिश्चित कर दूंगा। – Moses

7

इस तरह तो कुछ इस लेख पर एक नज़र डालें ...

http://css-tricks.com/490-overriding-the-default-text-selection-color-with-css/

...:

p.moz::-moz-selection { 
    background:#cc0000; 
    color:#fff; 
} 

p.webkit::-webkit-selection { 
    background:#cc0000; 
    color:#fff; 
} 

p.normal::selection { 
    background:#cc0000; 
    color:#fff; 
} 

मुझे आशा है कि इस मदद करता है।
ह्रिस्टो

+0

क्योंकि सीएसएस कैस्केड, आपको हमेशा "मानक" चयनकर्ता के ऊपर विक्रेता प्रीफिक्स्ड चयनकर्ताओं को रखना सुनिश्चित करना चाहिए। अन्यथा, भविष्य के ब्राउज़र अभी भी अपने स्वयं के विक्रेता-कार्यान्वयन के लिए डिफ़ॉल्ट होंगे, भले ही उन्होंने मानकीकृत संस्करण के लिए समर्थन जोड़ा हो। – Moses

+0

@Moses ... मुझे यकीन नहीं है कि आपका क्या मतलब है। – Hristo

+0

विक्रेताओं के उपसर्गों को ब्राउज़र के आधिकारिक तौर पर डब्ल्यू 3 सी द्वारा मानकीकृत करने से पहले सुविधाओं को लागू करने के साधनों के रूप में मौजूद है। हालांकि, एक बार आधिकारिक मानक मौजूद होने के बाद भविष्य के ब्राउज़रों को उपसर्ग की आवश्यकता होने का कोई कारण नहीं है। अपने कोड का उपयोग करके ब्राउज़र को पहले मानक ':: चयन' का सामना करना पड़ेगा, फिर बाद में स्टाइलशीट में यह ':: - moz-select' देखता है। क्योंकि ब्राउजर अब दोनों को समझता है, यह दूसरा विकल्प चुनता है क्योंकि इसे आखिरी बार सामना करना पड़ा। यह बुरा है क्योंकि आप संभवत: नए संस्करण के नए और मानकीकृत कार्यान्वयन का उपयोग करना चाहते हैं। – Moses

2

इस

::selection 
{ 
background:#999; 
color:#fff; 
} 
संबंधित मुद्दे