Html 如何删除带有供应商前缀的焦点边框？

我有一个响应迅速的网站，我正在使用Bootstrap 4构建，当单击可单击的元素时，我找不到删除所有轮廓的方法。这是我到目前为止所做的，但不起作用：

*,
*:focus {
   outline: none !important;
   -webkit-outline: none !important;
   -moz-outline: none !important;
   -ms-outline: none !important;
   -o-outline: none !important;
}

我不想使用

border:none

，因为我在设计中确实使用了边框

以下是我的手机（iPhone XR）上Chrome版网站的屏幕截图：

---

好的，我们需要更多的HTML和CSS来处理。但据我所知，bootstrap使用了

box shoadw

来添加这种类似边框的效果

所以只要覆盖他们添加的

框阴影

，你就可以开始了

例如：

/*来自引导的CSS*/
.窗体控件：焦点{
颜色：#495057；
背景色：#fff；
边框颜色：#80bdff；
大纲：0；
长方体阴影：0.2rem rgba（0,123,255,25）；
}

@

根据我的理解，边框和轮廓是不同的。如果要删除边框，则必须将边框设置为“无”，删除轮廓不起作用。我要提醒任何想从元素中删除焦点轮廓的人，以确保您有一些其他指示器来指示哪些元素具有焦点。大纲（或其他指标）对于可访问性至关重要。如果你正在使用键盘，你需要那个指示器来知道哪个元素有焦点，这样你就知道如何使用页面了！