Custom Text Selection Color in WordPress

This snippet allows you to customize the color of text when users highlight (select) content on your WordPress site. It improves visual consistency with your brand and enhances UX. The solution uses pure CSS (::selection) and works across modern browsers, with a fallback for Firefox.

1. CSS (Primary Solution)

Add this to Appearance → Customize → Additional CSS or your theme stylesheet:

::selection {
background: #ffcc00;
color: #000000;  
}

::-moz-selection {
    background: #ffcc00;
    color: #000000;
}

2. Optional: Apply to Specific Areas Only

If you only want this effect inside post content:

.entry-content ::selection {
    background: #ffcc00;
    color: #000000;
}

.entry-content ::-moz-selection {
    background: #ffcc00;
    color: #000000;
}

3. Optional: Add via functions.php (if you prefer code-based injection)

function custom_selection_color_styles() {
    echo '<style>
        ::selection {
            background: #ffcc00;
            color: #000000;
        }

::-moz-selection {
            background: #ffcc00;
            color: #000000;
        }
    </style>';
}

add_action('wp_head', 'custom_selection_color_styles');

🔹 Notes

• background = highlight color

• color = text color when selected

• Works in all modern browsers (with ::-moz-selection for Firefox)

• No JavaScript is required for basic functionality