custom-selection

killianog
js
custom-selection JS library on GitHub custom-selection JS library on npm Download custom-selection JS library

Add custom ::selection css pseudo-element to website using data attributes all so you can improve your websites look and feel

Version 1.1.3 License ISC Vulnerabilities 0
custom-selection has no homepage
custom-selection JS library on GitHub
custom-selection JS library on npm
Download custom-selection JS library
Keywords
attributescssdata attributespseudo-element::selectionjavascript
INSTALL
Type:
Version:
<script src=" https://cdn.jsdelivr.net/npm/custom-selection@1.1.3/dist/custom-selection.core.min.js "></script>
Learn more
Readme Files Statistics Browse CDN

Custom CSS Selection

npm npm bundle size jsdelivr.com

Verified on Openbase

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 <body> closing tag

<!-- Custom Selection -->
<script src="https://cdn.jsdelivr.net/npm/custom-selection@1.1.2/dist/custom-selection.core.min.js"></script>

Usage

Basic

With simple detection.

HTML

<body data-selection data-selection-color="1a1a1a" data-selection-text-color="#fffff"></body>

Element Attributes

Attribute Values Description
data-selection Initialises JavaScript
data-selection-color hex code https://img.shields.io/badge/hex-value-blue Changes text selection background color
data-selection-text-color hex code https://img.shields.io/badge/hex-value-blue Changes text selection text color
data-selection-text-stroke boolean https://img.shields.io/badge/-coming%20soon-inactive Initialises text stroke CSS value
data-selection-text-stroke-color hex code https://img.shields.io/badge/-coming%20soon-inactive https://img.shields.io/badge/hex-value-blue Changes text selection stroke color
data-selection-text-stroke-width string https://img.shields.io/badge/-coming%20soon-inactive Changes selection stroke width
data-selection-text-stroke-fill-color hex code https://img.shields.io/badge/-coming%20soon-inactive https://img.shields.io/badge/hex-value-blue Changes text selection stroke fill color
data-selection-text-decoration boolean https://img.shields.io/badge/-coming%20soon-inactive Initialises text decoration CSS value
data-selection-text-decoration-color hex code https://img.shields.io/badge/-coming%20soon-inactive https://img.shields.io/badge/hex-value-blue Changes text decoration color
data-selection-text-decoration-line string https://img.shields.io/badge/-coming%20soon-inactive Add line decorations using underline , overline & line-through
data-selection-text-decoration-style string https://img.shields.io/badge/-coming%20soon-inactive Add line styles using solid, double, dotted, dashed & wavy
data-selection-text-decoration-thickness string https://img.shields.io/badge/-coming%20soon-inactive

Demo

demo

Values Used

attribute value
data-selection -
data-selection-color #f7f33a
data-selection-text-color #cba6d6
Final Element
<body data-selection data-selection-color="#f7f33a" data-selection-text-color="#cba6d6"></body>

Browser support

source : mdn web docs supportFull = https://img.shields.io/badge/-Full%20Support-success

supportRequires a vendor prefix or different name for use = https://img.shields.io/badge/-Some%20Support-important

supportNo = https://img.shields.io/badge/-No%20Support-critical

Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet WebView Android
::selection https://img.shields.io/badge/-%20Version%201-success https://img.shields.io/badge/-%20Version%2012-success https://img.shields.io/badge/-%20Version%2062-success https://img.shields.io/badge/-%20Version%209.5-success https://img.shields.io/badge/-%20Version%201.1-success https://img.shields.io/badge/-%20Version%2018-success https://img.shields.io/badge/-%20Version%2062-success https://img.shields.io/badge/-%20Version%2014-success https://img.shields.io/badge/-No%20Support-critical https://img.shields.io/badge/-%20Version%201.0-success https://img.shields.io/badge/-%20Version%2037-success
dataset https://img.shields.io/badge/-%20Version%208-success https://img.shields.io/badge/-%20Version%2012-success https://img.shields.io/badge/-%20Version%206-success https://img.shields.io/badge/-%20Version%2011-success https://img.shields.io/badge/-%20Version%205.1-success https://img.shields.io/badge/-%20Version%2018-success https://img.shields.io/badge/-%20Version%206-success https://img.shields.io/badge/-%20Version%2011-success https://img.shields.io/badge/-%20Version%205-success https://img.shields.io/badge/-%20Version%201.1-success https://img.shields.io/badge/-%20Version%203-success
custom-selection.core.js https://img.shields.io/badge/-%20Version%201-success https://img.shields.io/badge/-%20Version%2012-success https://img.shields.io/badge/-%20Version%2062-success https://img.shields.io/badge/-%20Version%209.5-success https://img.shields.io/badge/-%20Version%201.1-success https://img.shields.io/badge/-%20Version%2018-success https://img.shields.io/badge/-%20Version%2062-success https://img.shields.io/badge/-%20Version%2014-success https://img.shields.io/badge/-No%20Support-critical https://img.shields.io/badge/-%20Version%201.0-success https://img.shields.io/badge/-%20Version%2037-success

mdn web docs