CSS kullanarak metin seçim rengini değiştirme?

Question

Şu anda bir web sitesinde çalışıyorum ve metin seçim rengini değiştirmek istiyorum.

Biraz çalışıyorum. Bu, çalışma sayfasındaki kodun (parçası) kodudur:

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

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

Çoğunlukla tatmin edici bir sonuç üretir. kullanarak Yukarıdaki resimde görebileceğiniz gibi

metin tamamen vurgulanıyor: Ancak, bazı vakalarda, vurgulama bu resimde gösterildiği gibi, (# FF099 arasında) onun verdiği rengini yitirmiş görünüyor doğru renk (# FF099); bununla birlikte, gövde metni ile başlığın yanı sıra gövde metninin solundaki alan, varsayılan renkle (mavi) vurgulanır. Vurgunun bölümlerini varsayılan değerlere geri dönmesini nasıl sağlayabilirim?

düzenleme: http://i.imgur.com/NmZIf.png

düzenlemek mevcut büyük resmi: jsFiddle örnek: Daha önce bu soruna üzerine geziniyor ve o çıkıyor http://jsfiddle.net/VUuFR/

Answer 1

:

::selection (or whatever selection you might use) 

bir mola çalışmıyor satır etiketi (br) .. onları kaldırın ve bunun yerine kenar boşluklarını kullanın. =) Burada gösterilecek bir keman var: Example

Answer 2

Aynı sorunu yaşıyordum.

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

Bu Deneyin:

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

gerçekten istemek Eğer

bu elementlerin (değil :: seçim) Eğer sorun yaşıyorsanız yapabileceğiniz bazı şeyler vardır Bkz. More Detail

Answer 4

::selection CSS seçiciyi kullanabilirsiniz. Bu, kullanıcı tarafından seçilen tüm metinlerle eşleşir. CSS3 belirtiminin bir parçası olmasa da, IE9 +, Opera, Google Chrome ve Safari'de desteklenir. Firefox, öneki ::-moz-selection'u destekler.

Daha fazla detay ve örnekler: http://www.snippetsource.net/Snippet/86/change-color-of-selected-text

Answer 5

deneyin <p> elemanlarına marjı ile <br /> yerine.İşte

bir Fiddle Demo

çalışma HTML

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

CSS

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

Answer 6

Ben aşağıdaki kodu öneririm, ben onun iyi çalışıyor çalıştılar. İşte

canlı çalışma Demo ile bir bağlantı 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; 
}