tupence - CSS Demos

CSS3 Demos - Highlight Selected Text

The CSS3 selector ::selection can be used to change the background colour of selected text.

Highlight Selected Text Demo

Highlight the text below to see the effect.

Pink

If you highlight this text the background will be pink. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacus vitae quam dictum fermentum.

Orange

If you highlight this text the background will be orange. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacus vitae quam dictum fermentum.

Purple

If you highlight this text the background will be purple. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacus vitae quam dictum fermentum.

This is what it should look like

Code

HTML

• <p class="purple">If you highlight this text the background will be purple. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacus vitae quam dictum fermentum.</p>

CSS

• .purple::selection {
  background: #964e9b;
  color: #fff;
  }
• .purple::-moz-selection {
  background: #964e9b;
  color: #fff;
  }

Support & Prefixes

This is fully supported in the latest versions of Opera, Chrome and Safari. It will work in Firefox with the prefix shown below. There's currently no support in Internet Explorer.

Prefixes
Mozilla browsers - ::-moz-selection

More CSS3 Demos This Way