andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Improve ::selection example and description

Browse Source
This commit is contained in:
Mattia Astorino
2018-02-27 22:45:56 +01:00
parent c6543e1db8
commit e4a81702e0
8 changed files with 4189 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
snippets/custom-text-selection.md
View File

@ -11,6 +11,10 @@ Changes the styling of text selection.
#### CSS
```css
::selection {
background: aquamarine;
color: black;
}
.custom-text-selection::selection {
background: red;
color: white;
@ -20,10 +24,19 @@ Changes the styling of text selection.
#### Demo
<div class="snippet-demo">
<p class="snippet-demo__custom-text-selection">Select some of this text.</p>
<p>Global aquamarine selection color</p>
<p class="snippet-demo__custom-text-selection">Red selection color.</p>
</div>
<style>
::selection {
background: aquamarine;
color: black;
}
::-moz-selection {
background: aquamarine;
color: black;
}
.snippet-demo__custom-text-selection::selection {
background: red;
color: white;
@ -36,7 +49,7 @@ Changes the styling of text selection.
#### Explanation
`::selection` defines a pseudo selector on an element to style text within it when selected.
`::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