Changing the Selection Color

To change the selection color, you will need to use the selection pseudo-element. Go ahead and paste the following CSS rules below your mainContent rule:

#mainContent p::selection {

background:#FF99CC;

color: #FFF;

}

#mainContent p::-moz-selection {

background:#FF99CC;

color: #FFF;

}

#mainContent p::-webkit-selection {

background:#FF99CC;

color: #FFF;

}

You can use the background or background-color property to specify the background color of your selection, and you can use the color property to specify the color of the highlighted text.

Once you have made those changes, your selection background and foreground color will look custom and unique to your design.

-Thanks