Tab and spoiler outline

Preface

Since version 5.2.0 Tab and Spoiler titles have a thin outline around them when focused. The outline allows users who can’t use a mouse to access hidden content using only their keyboard.

Disabling this outline is highly discouraged as it will make your content inaccessible for those users who can’t use a mouse or trackpad.

How to disable the outline

If, for some reason, you want to disable this outline, follow instructions below:

  1. Navigate to Dashboard – Shortcodes – Settings;
  2. Look for the Custom CSS code field;
  3. Add the following snippet to that field.

Custom CSS code

/* Disable outline in Tabs */
.su-tabs-nav span:focus {
outline: none;
}

/* Disable outline in Spoilers */
.su-spoiler-title:focus {
outline: none;
}

How to change the outline

You can change the outline color, thickness or style. To do that, please follow the instructions below.

  1. Navigate to Dashboard – Shortcodes – Settings;
  2. Look for the Custom CSS code field;
  3. Add the following snippet to that field.

Custom CSS code

/* Make Tabs outline 3px wide, dashed style, and red color */
.su-tabs-nav span:focus {
outline: 3px dashed #ff0000;
}

/* Make Spoiler outline 3px wide, dashed style, and red color */
.su-spoiler-title:focus {
outline: 3px dashed #ff0000;
}