30-seconds-of-code/custom-text-selection.md at 11eff23e47b0cf8b0af706090127ebf3685ace3f

Files

atomiks 11eff23e47 Autoscoping (#103 )

* Add autoscoping with generated demo

* Remove manual demo from all snippets

* Add JavaScript inside IIFE

* Align mouse-cursor-gradient-tracking.md to demo code

* Match snippets to demo

* Update CONTRIBUTING.md

* Create reusable function for code extraction

2018-10-05 09:18:51 +10:00

778 B

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: deeppink;
  color: white;
}

Demo

Explanation

::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.

https://caniuse.com/#feat=css-selection

778 B Raw Blame History