New to Telerik UI for Blazor? Start a free 30-day trial
Remove Dotted Outline of Focused TabStrip Tab
Environment
Product | TabStrip for Blazor |
Description
This KB article answers the following questions:
- How to remove the dotted line around the TabStrip tab content when focus is set on the tab?
- How to hide the border for selected tab that appears after click?
- How to get rid of TabStrip borders outlines on click, active, and focus?
- How to prevent selection of the TabStrip content
<div>
? - How to supress the darker dashed border that appears when you click inside the Tab Strip?
- How can I control the appearance of the Telerik Blazor TabStrip tabs?
Solution
The focus outline of TabStrip tabs is an accessibility feature. The example below shows to how to remove it, but this is not recommended. Instead, consider using different custom focus styles.
- Set the TabStrip
Class
parameter to a custom CSS class. - Use the custom class to apply an
outline-style:none
oroutline:none
style to thediv.k-tabstrip-content
children of the TabStrip element.
Remove TabStrip tab dotted outline
<TelerikTabStrip @bind-ActiveTabIndex="@TabStripActiveTabIndex"
Class="no-outline">
<TabStripTab Title="Tab 1">
Tab 1 Content
</TabStripTab>
<TabStripTab Title="Tab 2">
Tab 2 Content
</TabStripTab>
</TelerikTabStrip>
<style>
div.no-outline > .k-tabstrip-content:focus {
outline-style: none;
}
</style>
@code {
private int TabStripActiveTabIndex { get; set; }
}