如何移除Bootstrap5切换按钮点击时出现的黑色边框？

Bootstrap5中按钮点击后出现的黑色边框是浏览器默认的:focus轮廓样式，你可以通过自定义CSS来移除它：

针对导航栏切换按钮（navbar-toggler） #

如果是导航栏的汉堡切换按钮，添加以下CSS：

.navbar-toggler:focus {
    box-shadow: none;
    outline: none;
}

针对普通按钮 #

如果是普通的Bootstrap按钮，使用下面的CSS：

.btn:focus {
    box-shadow: none;
    outline: none;
}

补充说明 #

• box-shadow: none 用于移除Bootstrap自带的聚焦阴影效果
• outline: none 用于移除浏览器默认的聚焦轮廓

注意：移除聚焦轮廓可能会影响页面可访问性，若需要兼顾，可替换为自定义的聚焦样式，比如：

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* 自定义淡蓝色聚焦阴影 */
    outline: none;
}

内容的提问来源于stack exchange，提问作者Kasun Witharana