Custom CSS Selection
[](https://openbase.com/js/custom-selection?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge )
Add custom `::selection` css pseudo-element to website using data attributes all so you can improve your websites look and feel
## Installation
> ⚠️ Custom CSS Selection is a controversial practice that can cause usability, accessibility, and performance issues. Don't override selected text styles for purely aesthetic reasons — users can customize them to suit their needs. For people experiencing cognitive concerns or who are less technologically literate, unexpected changes to selection styles may hurt their understanding of the functionality. If overridden, it is important to ensure that the contrast ratio between the text and background colors of the selection is high enough that people experiencing low vision conditions can read it.
#### CDN
Inside `` closing tag
```html
```
## Usage
### Basic
With simple detection.
#### HTML
```html
```
## Element Attributes
| Attribute | Values | Description |
| ------------------------------------------ | ---------- | ------------------------------------------------------------ |
| `data-selection` | | Initialises JavaScript |
| `data-selection-color` | `hex code` |  Changes text selection background color |
| `data-selection-text-color` | `hex code` |  Changes text selection text color |
| `data-selection-text-stroke` | `boolean` |  Initialises text stroke CSS value |
| `data-selection-text-stroke-color` | `hex code` |   Changes text selection stroke color |
| `data-selection-text-stroke-width` | `string` |  Changes selection stroke width |
| `data-selection-text-stroke-fill-color` | `hex code` |   Changes text selection stroke fill color |
| `data-selection-text-decoration` | `boolean` |  Initialises text decoration CSS value |
| `data-selection-text-decoration-color` | `hex code` |   Changes text decoration color |
| `data-selection-text-decoration-line` | `string` |  Add line decorations using `underline` , `overline` & `line-through` |
| `data-selection-text-decoration-style` | `string` |  Add line styles using `solid`, `double`, `dotted`, `dashed` & `wavy` |
| `data-selection-text-decoration-thickness` | `string` |  |
## Demo
#### Values Used
| attribute | value |
| :-------------------------- | :-------: |
| `data-selection` | - |
| `data-selection-color` | `#f7f33a` |
| `data-selection-text-color` | `#cba6d6` |
###### Final Element
```html
```
## Browser support
source : mdn web docs
`supportFull` = 
`supportRequires a vendor prefix or different name for use` = 
`supportNo` = 
| | Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on iOS | Samsung Internet | WebView Android |
| :------------------------- | :----------------------------------------------------------: | :----------------------------------------------------------: | :----------------------------------------------------------: | :----------------------------------------------------------: | :----------------------------------------------------------: | :----------------------------------------------------------: | :----------------------------------------------------------: | :----------------------------------------------------------: | :----------------------------------------------------------: | :----------------------------------------------------------: | :----------------------------------------------------------: |
| `::selection` |  |  |  |  |  |  |  |  |  |  |  |
| `dataset` |  |  |  |  |  |  |  |  |  |  |  |
| `custom-selection.core.js` |  |  |  |  |  |  |  |  |  |  |  |
## Useful Links
[mdn web docs ](https://developer.mozilla.org/en-US/docs/Web/CSS/::selection)
