सीएसएस का उपयोग कर पाठ चयन रंग बदलना?

Question

मैं वर्तमान में एक वेबसाइट पर काम कर रहा हूं, और मैं टेक्स्ट चयन रंग बदलना चाहता हूं।

मेरे पास कुछ हद तक काम कर रहा है। यह मेरी स्टाइलशीट में कोड का हिस्सा है:

::selection { 
    background: #FF0099; 
    color: black; 
    text-shadow: none; 
} 

::-moz-selection { 
    background: #FF0099; 
    color: black; 
    text-shadow: none; 
} 

यह अधिकतर संतोषजनक परिणाम उत्पन्न करता है।

ऊपर चित्र में देख सकते हैं, पाठ पूरी तरह से हाइलाइट किया गया है का उपयोग करते हुए: हालांकि, कुछ मामलों में, हाइलाइटिंग के रूप में इस तस्वीर में दिखाया गया है, (# FF099 का) ने अपने दिए गए रंग खोने के लिए लगता है सही रंग (# एफएफ 0 99); हालांकि, शरीर के पाठ और शीर्षक के साथ-साथ शरीर के पाठ के बाईं ओर का क्षेत्र डिफ़ॉल्ट रंग (नीले रंग) के साथ हाइलाइट किया गया है। मैं हाइलाइटिंग के हिस्सों को डिफ़ॉल्ट पर वापस जाने से कैसे रोक सकता हूं?

संपादित करें: बड़ा पर http://i.imgur.com/NmZIf.png

संपादित उपलब्ध चित्र: jsFiddle नमूना: http://jsfiddle.net/VUuFR/

Answer 1

मैंने पहले इस समस्या पर फिरते है और यह पता चला है:

::selection (or whatever selection you might use) 

एक को तोड़ने पर काम नहीं करता लाइन टैग (बीआर) .. उन्हें हटा दें और इसके बजाय मार्जिन का उपयोग करें। =) यहां प्रदर्शित करने के लिए एक पहेली है: Example

Answer 2

मुझे एक ही समस्या थी। यह प्रयास करें

div { 
    position: relative; /*Use it as much as you can*/ 
    height: 100px; /* or max-height instead of margin or br */ 
    line-height: normal; /* keep line-height normal*/ 
    -webkit-transform: translate(0px,0px); /* This hack can work */ 
    -moz-transform: translate(0px,0px); /* hack moz */ 
    transform: translate(0px,0px); /* hack prefixless */ 
} 

Answer 3

:

<style> 
*::selection { 
    background: #cc0000; 
    color: #ffffff; 
} 
*::-moz-selection { 
    background: #cc0000; 
    color: #ffffff; 
} 
*::-webkit-selection { 
    background: #cc0000; 
    color: #ffffff; 
} 
</style> 

तुम सच में चाहते यदि यह वहाँ कुछ चीजें आप तत्वों (नहीं :: चयन) आप के साथ परेशानी हो रही है में कर सकते हैं More Detail

Answer 4

के लिए देखें आप ::selection सीएसएस चयनकर्ता का उपयोग कर सकते हैं। यह उपयोगकर्ता द्वारा चुने गए सभी पाठ से मेल खाता है। भले ही यह CSS3 विनिर्देश का हिस्सा न हो, यह आईई 9 +, ओपेरा, Google क्रोम और सफारी में समर्थित है। फ़ायरफ़ॉक्स prefixed ::-moz-selection का समर्थन करता है।

अधिक विवरण और उदाहरण: http://www.snippetsource.net/Snippet/86/change-color-of-selected-text

Answer 5

कोशिश <p> तत्वों को मार्जिन के साथ अपने <br /> को बदलने के लिए।

यहाँ एक काम कर Fiddle Demo

एचटीएमएल

<p>sample</p> 
<p>sample2</p> 

सीएसएस

p {margin-bottom:50px;} 
::selection { 
    background: #FF0099; 
    color: black; 
    text-shadow: none; 
} 
::-moz-selection { 
    background: #FF0099; 
    color: #EEE; 
    text-shadow: none; 
} 

Answer 6

मैं नीचे दिए गए कोड सुझाव है, मैं अपने ठीक काम कर रहा कोशिश की है।

यहाँ लाइव काम कर डेमो के साथ एक लिंक हैChanging the text selection color using CSS

::selection 
    { 
     background: #FF0099; 
     color: black; 
     text-shadow: none; 
    } 
    ::-moz-selection 
    { 
     background: #FF0099; 
     color: #EEE; 
     text-shadow: none; 
    } 
    p 
    { 
     margin-bottom: 50px; 
    } 

Answer 7

/*** Works on common browsers ***/ 
::selection { 
    background-color: #352e7e; 
    color: #fff; 
} 

/*** Mozilla based browsers ***/ 
::-moz-selection { 
    background-color: #352e7e; 
    color: #fff; 
} 

/***For Other Browsers ***/ 
::-o-selection { 
    background-color: #352e7e; 
    color: #fff; 
} 

::-ms-selection { 
    background-color: #352e7e; 
    color: #fff; 
} 

/*** For Webkit ***/ 
::-webkit-selection { 
    background-color: #352e7e; 
    color: #fff; 
}