andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
e4a81702e0c7112933c41ac4e5f658502b4d2ae8
30-seconds-of-code/snippets/custom-text-selection.md
Mattia Astorino e4a81702e0 fix: Improve ::selection example and description
2018-02-27 22:45:56 +01:00

1.2 KiB
Raw Blame History

Custom text selection

Changes the styling of text selection.

HTML

<p class="custom-text-selection">Select some of this text.</p>

CSS

::selection {
  background: aquamarine;
  color: black;
}
.custom-text-selection::selection {
  background: red;
  color: white;
}

Demo

Global aquamarine selection color

Red selection color.

<style> ::selection { background: aquamarine; color: black; } ::-moz-selection { background: aquamarine; color: black; } .snippet-demo__custom-text-selection::selection { background: red; color: white; } .snippet-demo__custom-text-selection::-moz-selection { background: red; color: white; } </style>

Explanation

::selection and ::-moz-selection defines a pseudo selector on an element to style text within it when selected. Note that if you don't combine any other selector your style will be applied at document root level, to any selectable element.

Browser support

⚠️ Requires prefixes for full support and is not actually in any specification.