Html 单击后删除按钮周围的蓝色边框

下面是有问题的代码

：根目录{
--彩色前景文本主：rgb（255、72、142）；
--彩色前景文本子：rgb（0、114、153）；
}
html，
身体{
身高：100%；
}
img{
最大宽度：100%；
}
#掩护{
背景：#222URL（'Resources/img/cover.jpg'）中心不重复；
背景尺寸：封面；
颜色：var（--彩色前景文本主）；
身高：100%；
文本对齐：居中；
显示器：flex；
对齐项目：居中；
}
#封面标题{
宽度：100%；
}
#订阅按钮{
文本对齐：居中；
背景：var（--彩色前景文本main）；
颜色：白色；
大纲：0；
}
#订阅按钮：悬停{
背景：var（--彩色前景文本子文件）；
}

学校项目


名称
电子邮件
订阅
//初始化工具提示组件
$（函数（）{
$（'[data toggle=“tooltip”]'）。tooltip（）
})
//初始化popover组件
$（函数（）{
$（'[data toggle=“popover”]'）。popover（）
})

只需在css中添加以下内容：

button:focus {outline:0;}

---

这个名为“outline”的小属性主要放在伪类中。因此，为了避免它，您可以使用

outline:none

或

outline:0

我以为它是

outline

但不是，当然我没有看到您的代码，但看到后，问题就在这里：

border: 2px var(--color-foreground-text-sub) solid;

拆下这条线。就这些

编辑：单击后，覆盖此选项：

.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: none!important;
}

：根目录{
--彩色前景文本主：rgb（255、72、142）；
--彩色前景文本子：rgb（0、114、153）；
}
.btn.focus，.btn:focus{
大纲：0；
盒影：无！重要；
}
html，
身体{
身高：100%；
}
img{
最大宽度：100%；
}
#掩护{
背景：#222URL（'Resources/img/cover.jpg'）中心不重复；
背景尺寸：封面；
颜色：var（--彩色前景文本主）；
身高：100%；
文本对齐：居中；
显示器：flex；
对齐项目：居中；
}
#封面标题{
宽度：100%；
}
#订阅按钮{
文本对齐：居中；
背景：var（--彩色前景文本main）；
颜色：白色；
大纲：0；
}
#订阅按钮：悬停{
背景：var（--彩色前景文本子文件）；
}

学校项目


名称
电子邮件
订阅
//初始化工具提示组件
$（函数（）{
$（'[data toggle=“tooltip”]'）。tooltip（）
})
//初始化popover组件
$（函数（）{
$（'[data toggle=“popover”]'）。popover（）
})

大纲：0

lol@pedram即使这样也不行。我仍然可以看到浅蓝色的边框和深蓝色的轮廓（我想去掉），我删除了边框并尝试了outline属性，遗憾的是它没有任何作用。它发生在Chrome和Edge上，因此它不是特定于浏览器的。请检查下面的更新答案