¿Cambiar el color de selección de texto usando CSS?

Question

Actualmente estoy trabajando en un sitio web, y quiero cambiar el color de selección de texto.

Lo tengo algo funcionando. Este es (parte de) el código en mi hoja de estilo:

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

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

Produce un resultado mayormente satisfactorio. Sin embargo, en algunos casos, el resaltado parece perder su color determinado (de # FF099), como se muestra en esta imagen:

Como se puede ver en la imagen superior, se resalta el texto en su totalidad utilizando el color correcto (# FF099); sin embargo, el área entre el texto del cuerpo y el título, así como a la izquierda del texto del cuerpo, se resalta con el color predeterminado (de azul). ¿Cómo puedo evitar que partes del resaltado vuelvan al valor predeterminado?

edición: la imagen más grande disponible en http://i.imgur.com/NmZIf.png

edición: muestra jsFiddle: http://jsfiddle.net/VUuFR/

Answer 1

Yo he ido a este problema antes y resulta que:

::selection (or whatever selection you might use) 

no funciona en una ruptura line tag (br) .. eliminarlos y usar márgenes en su lugar. =) Aquí hay un violín para demostrar: Example

Answer 2

Estaba teniendo el mismo problema.

Si realmente quiere esto, hay algunas cosas que puede hacer en los elementos (no :: selección) tiene problemas 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

intenta esto:

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

Consulte para More Detail

Answer 4

Puede usar el selector CSS ::selection. Esto coincide con todo el texto seleccionado por el usuario. Aunque no forma parte de la especificación CSS3, es compatible con IE9 +, Opera, Google Chrome y Safari. Firefox admite el prefijo ::-moz-selection.

Más detalles y ejemplos: http://www.snippetsource.net/Snippet/86/change-color-of-selected-text

Answer 5

tratar de sustituir su <br /> con un margen a los <p> elementos.

Aquí es un trabajo 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

Yo sugeriría que el código de abajo, he probado su funcionamiento muy bien.

Aquí hay un enlace con la demostración trabajos en tensiónChanging 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; 
}