如何移除Leaflet地图中绑定Tooltip后选中区域出现的黑色边框

这个黑色边框是浏览器为可聚焦元素添加的默认焦点轮廓——当你给GeoJSON图层绑定Tooltip后，图层元素会被设置为可聚焦状态，点击时就会触发这个默认样式。

以下是几种彻底移除的方法：

• 全局移除所有可交互图层的焦点轮廓
  直接在CSS中添加以下代码：

.leaflet-interactive:focus {
    outline: none !important;
}

• 仅针对绑定Tooltip的图层移除
  如果不想影响其他可交互元素，可以在绑定Tooltip时给目标图层添加自定义类：

layer.bindTooltip(this.returnTooltip(feature)).addClass('no-focus-outline');

然后对应CSS：

.no-focus-outline:focus {
    outline: none !important;
}

• 兼顾可访问性的替代方案
  如果担心移除轮廓影响键盘导航用户的体验，可以自定义焦点样式，替换成更优雅的效果：

.leaflet-interactive:focus {
    outline: 2px solid #42b983 !important; /* 替换成你需要的颜色 */
    outline-offset: 2px;
}

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