Zmienianie koloru zaznaczenia tekstu za pomocą CSS?

Question

Aktualnie pracuję nad witryną internetową i chcę zmienić kolor zaznaczenia tekstu.

Mam trochę pracy. To jest (część) kodu w moim arkuszu stylów:

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

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

Daje to w większości satysfakcjonujący wynik. Jednak w niektórych przypadkach, podświetlanie wydaje się tracić swoją dany kolor (z # FF099), jak widać na tym zdjęciu:

Jak widać na powyższym obrazku, tekst jest całkowicie wyróżnionego za pomocą właściwy kolor (# FF099); jednak obszar między tekstem głównym a tytułem, a także po lewej stronie tekstu głównego, jest podświetlony domyślnym kolorem (niebieskim). Jak mogę uniemożliwić części podświetlania powrót do wartości domyślnych?

edit: większy obraz dostępny w http://i.imgur.com/NmZIf.png

EDIT: jsFiddle próbki: http://jsfiddle.net/VUuFR/

Answer 1

Mam wędrował po tym problemem wcześniej i jak się okazuje:

::selection (or whatever selection you might use) 

nie działa na przerwie tag linii (br) ... usuń je i użyj zamiast nich marginesów. =) Oto skrzypce, aby zademonstrować: Example

Answer 2

Miałem ten sam problem.

Jeśli naprawdę chcą to istnieje kilka rzeczy, które można zrobić w elementach (nie :: wybór) masz problemy z:

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

Spróbuj to:

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

Patrz: More Detail

Answer 4

Możesz użyć selektora CSS ::selection. Dopasowuje cały tekst wybrany przez użytkownika. Mimo że nie jest częścią specyfikacji CSS3, jest obsługiwany w IE9 +, Opera, Google Chrome i Safari. Firefox obsługuje prefiks ::-moz-selection.

Więcej szczegółów i przykładów: http://www.snippetsource.net/Snippet/86/change-color-of-selected-text

Answer 5

Spróbuj zastąpić <br /> z marginesu do <p> elementów.

Oto działający Fiddle Demo

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

Proponuję poniższy kod, próbowałem jej działa poprawnie.

Oto link z Demo żywo roboczegoChanging 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; 
}