How to disable or change the outline around tab and spoiler titles

Table of contents

1. Preface
2. How to disable the outline
3. How to change the 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;
}