Custom Text Selection Color

Browsers normally display a grey or blue highlight when text is selected. With this snippet, you can replace that default style with your own brand colors.

Setup

Add External Scripts

Copy & paste the scripts before the </body> tag of your project. If you added them before for another setup, skip this step.

Add HTML

Place the code in an HTML widget or add it through Elementor → Custom Code (before the closing </body> tag) either globally or only on selected pages.

Add custom CSS

Paste the code through the page or site settings, or add it via Elementor → Custom Code (before </body>) for broader use.

::selection {
  background: #062823;   /* highlight bg color */
  color: #afebd5;        /* text color inside the highlight */
}

Add custom Javascript

Paste the script through Elementor → Custom Code (set to load after </body>) for site-wide or page-specific loading.

Add custom PHP

Place the PHP snippet inside your theme’s functions.php or using any code snippet to enable logic.

Publish and preview live

Some solutions only work on the live site. Always publish and test after each change, as results may not appear in the editor.

Implementation

Selection background

The background property controls the highlight color shown when text is selected. Pick a color with enough contrast to keep selected text readable.

::selection {
  background: #062823;   /* highlight bg color */
}

Selection text color

The color property controls the text color inside the selection highlight. Choose a color that stays clear against the background.

::selection {
  color: #afebd5;        /* text color inside the highlight */
}