{"id":33809,"date":"2019-03-01T09:17:43","date_gmt":"2019-03-01T09:17:43","guid":{"rendered":"http:\/\/getshortcodes.com\/?post_type=docs&p=33809"},"modified":"2019-05-28T14:05:58","modified_gmt":"2019-05-28T14:05:58","slug":"how-to-disable-or-change-the-outline-around-tab-and-spoiler-titles","status":"publish","type":"docs","link":"https:\/\/getshortcodes.com\/docs\/how-to-disable-or-change-the-outline-around-tab-and-spoiler-titles\/","title":{"rendered":"How to disable or change the outline around tab and spoiler titles"},"content":{"rendered":"\n
\"\"
Tab and spoiler outline<\/figcaption><\/figure>\n\n\n

Table of contents<\/p>\n\n

  1. Preface<\/a><\/li>
  2. How to disable the outline<\/a><\/li>
  3. How to change the outline<\/a><\/li><\/ol><\/li><\/ol>\n\n\n

    Preface<\/h2>\n\n\n\n

    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.<\/p>\n\n\n\n

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

    How to disable the outline<\/h2>\n\n\n\n

    If, for some reason, you want to disable this outline, follow instructions below:<\/p>\n\n\n\n

    1. Navigate to Dashboard \u2013 Shortcodes \u2013 Settings<\/em>;<\/li>
    2. Look for the Custom CSS code<\/em> field;<\/li>
    3. Add the following snippet to that field.<\/li><\/ol>\n\n\n\n

      Custom CSS code<\/strong><\/p>\n\n\n\n

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

      \/* Disable outline in Spoilers *\/
      .su-spoiler-title:focus {
        outline: none;
      }<\/pre>\n\n\n\n
      How to change the outline<\/h2>\n\n\n\n
      You can change the outline color, thickness or style. To do that, please follow the instructions below.<\/p>\n\n\n\n
      1. Navigate to Dashboard \u2013 Shortcodes \u2013 Settings<\/em>;<\/li>
      2. Look for the Custom CSS code<\/em> field;<\/li>
      3. Add the following snippet to that field.<\/li><\/ol>\n\n\n\n
        Custom CSS code<\/strong><\/p>\n\n\n\n
        \/* 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;
        }<\/pre>\n","protected":false},"featured_media":0,"template":"","docs_category":[23],"class_list":["post-33809","docs","type-docs","status-publish","hentry","docs_category-customization"],"_links":{"self":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/docs\/33809","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/types\/docs"}],"wp:attachment":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/media?parent=33809"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/docs_category?post=33809"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}