How to personalize the color of selection with CSS

The possibilities of very many CSS are one that I like much is the possibility of personalizing the color of the text selection that in almost all the navigators is of blue color, but you have tried to select text in this blog you will have realized that is of green color clearly, good only you are doing if it from Firefox or Safari since Internet Explorer and Opera do not support that property.

In order to make that all the page Web has the new color we needed to include following code CSS

/* compatible selector with Firefox *
:: - moz-selection {
    background: #D4F699; /* basic color *
    color: #7AA62F; /* text color *
}
/* compatible selector with Safari *
:: selection {
    background: #D4F699; /* basic color *
    color: #7AA62F; /* text color *
}

And he is not everything, because we can specify different colors for nuesta page Web, for example for headed h1 is going to be of a color and the paragraphs of another color.

/* compatible selector with Firefox *
h1:: - moz-selection {/* for headed h1 *
    background: #D4F699;
    color: #7AA62F;
}
p:: - moz-selection {/* for paragraphs p *
    background: #7AA62F;
    color: #D4F699;
}
/* compatible selector with Safari *
h1:: selection {/* for headed h1 *
    background: #D4F699;
    color: #7AA62F;
}
p:: selection {/* for paragraphs p *
    background: #7AA62F;
    color: #D4F699;
}

To only I want them to remember that the selectors:: selection and:: moz-selection is not standard and therefore they cause that your CSS does not validate correctly.

9 Commentaries (yours Adds)

  1. aebs
    Commented 15 May 2008 to the 23:46 | Permalink | To respond ↓

    Excellent, thanks for the information.

    U_U Pity, I imagined that he was something nonstandard, but equal it is thanked for (and from now on =D implements in my Webs)

    Greetings

  2. Commented 16 May 2008 to the 2:01 | Permalink | To respond ↓

    @aebs: yes it is a pity that is not a standard property because I like much.

  3. Juan
    Commented 16 May 2008 to the 2:07 | Permalink | To respond ↓

    Hello:: - moz-selection is not standard, but:: selection if it is it or, rather, will be it.
    She is one of the new specifications of css3, for that reason not been worth like css2.

    Greetings!

  4. Commented 16 May 2008 to the 9:53 | Permalink | To respond ↓

    they @Juan: thank you very much Po the data

  5. Commented 15 June 2008 to the 2:58 | Permalink | To respond ↓

    agruegue and does not work to me, in which it leaves from the file I must style.css it add?

  6. Commented 15 June 2008 to the 2:59 | Permalink | To respond ↓

    I already work adds, it right under the description of the subject that is the primeor that comes.

  7. Commented 16 June 2008 to the 20:26 | Permalink | To respond ↓

    that it could do if I want that in it explores functions or that effect cannot be obtained
    so that the truth I would like to apply it in explores not so that I like but the teacher that I have the Czech in explores

  8. Commented 17 June 2008 to the 0:21 | Permalink | To respond ↓

    @Jose Antonio: at the moment I do not know some method but surely with the help of you can obtain it to Javascript.

  9. skimmo
    Commented 24 June 2008 to the 23:53 | Permalink | To respond ↓

    I need to know like putting backrund with photos in my space using the system css or if there is some situated one provides that them free

A Commentary writes

Its mail never will be published nor shared. The required fields are noticeable *

*
*