Cambiare il colore di selezione del testo usando i CSS?

Question

Attualmente sto lavorando a un sito Web e desidero modificare il colore di selezione del testo.

Ho un po 'di lavoro. Questo è (parte di) il codice nel mio foglio di stile:

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

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

Produce un risultato per lo più soddisfacente. Tuttavia, in alcuni casi, l'evidenziazione sembra perdere il suo colore data (di # FF099), come mostrato in questa immagine:

Come si può vedere nella foto sopra, il testo è interamente evidenziato utilizzando il colore corretto (# FF099); tuttavia, l'area tra il corpo del testo e il titolo, nonché a sinistra del corpo del testo, viene evidenziata con il colore predefinito (di colore blu). Come posso mantenere le parti dell'evidenziazione tornando al valore predefinito?

edit: immagine ingrandita disponibile presso http://i.imgur.com/NmZIf.png

edit: campione jsFiddle: http://jsfiddle.net/VUuFR/

Answer 1

Ho vagato su questo problema prima e si scopre:

::selection (or whatever selection you might use) 

non funziona in una pausa line tag (br) .. rimuovili e usa i margini. =) Ecco un violino per dimostrare: Example

Answer 2

Avevo lo stesso problema.

Se davvero desidera che questo ci sono alcune cose che si possono fare negli elementi (non :: selezione) si stanno avendo problemi con:

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

Try This:

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

Vedere per More Detail

Answer 4

È possibile utilizzare il selettore CSS ::selection. Questo corrisponde a tutto il testo selezionato dall'utente. Anche se non fa parte delle specifiche CSS3, è supportato in IE9 +, Opera, Google Chrome e Safari. Firefox supporta il prefisso ::-moz-selection.

Maggiori dettagli ed esempi: http://www.snippetsource.net/Snippet/86/change-color-of-selected-text

Answer 5

provare a sostituire il vostro <br /> con margine agli <p> elementi.

Ecco un lavoro 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

Vorrei suggerire il codice qui sotto, ho cercato il suo bel lavoro.

Ecco un link con Demo lavori sotto tensioneChanging 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; 
}