This custom code modification allows you to control the appearance of selected text across different browsers, enhancing the visual experience of your website.

Default configuration

The selectors use the following Webflow Variables:

• Text color: var(--neutral-colors--100)
• Background color: var(--primary-colors--100)
• Text Shadow: A subtle shadow effect for better visibility (text-shadow: 0 0.5px 1.5px rgba(0, 19, 88, 0.3), 0 2px 5px rgba(0, 19, 88, 0.1);)

Customization options

1. Using Webflow variables (Recommended):
   • Simply update the corresponding variables in Webflow's design settings.
   • This ensures site-wide consistency.
2. Using custom colors:
   • You can replace the variables with specific HEX color codes.
   • This allows for more granular control but requires manual updates.

Example of custom color selection (using HEX colors):

/* Customize text selection for Mozilla browsers */
::-moz-selection {
  color: #FFFFFF !important;
  background: **#B658FF**;
  text-shadow: **0 0.5px 1.5px rgba(0, 19, 88, 0.3), 0 2px 5px rgba(0, 19, 88, 0.1)**;
}

/* Customize text selection for other browsers */
::selection {
  color: #FFFFFF !important;
  background: **#B658FF**;
  text-shadow: **0 0.5px 1.5px rgba(0, 19, 88, 0.3), 0 2px 5px rgba(0, 19, 88, 0.1)**;
}