Customizing the focus ring on your website is one of those small tweaks that instantly makes your site feel more polished and professional. If you’re using Wix Studio, you may have noticed that the default focus style on text inputs doesn’t always match your brand—and honestly, it can look a bit out of place.

Let’s fix that with a tiny bit of custom CSS.

The Problem with Default Focus Styles

By default, browsers add a blue or black outline when someone clicks into a form field or tabs through a page using their keyboard. It works, but it rarely looks good on a custom-designed site.

In our case, we wanted something softer, cleaner, and more on-brand.

The Solution: A Soft “Glow” Effect

Instead of removing the focus ring (which would hurt accessibility), we redesigned it. We swapped the harsh outline for a subtle pink border and a gentle glow using box-shadow.

Here’s the CSS we used:

/* Custom Focus Ring for Wix Studio Text Inputs */
.text-input__input:focus {
  border-color: #e91e63 !important;
  border-width: 1px !important;
  box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.2) !important;
}

Why This Works

• Matches your brandThe pink color replaces the generic browser blue, so the input feels like it actually belongs in your design.

• Creates a smooth “halo” effectUsing box-shadow instead of outline gives you a soft glow that doesn’t push other elements around.

• Stays accessibleWe didn’t remove the focus state—we improved it. Keyboard users can still clearly see where they are, which is essential for accessibility.

How to Add This in Wix Studio

1. Open your site in the Wix Studio Editor

2. Enable Dev Mode by clicking the {} icon

3. Open the CSS panel and go to global.css

4. Paste the code at the bottom and save

That’s it!

Small details like this—often called micro-interactions—can completely change how your site feels. They make your design feel intentional, usable, and inclusive.