# 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:

```css
::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:

```css
.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)

```php
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