默认情况下设置为活动时在我的图标周围设置边框答案

【问题标题】：Getting a border around my icon when it is set to active by default默认情况下设置为活动时在我的图标周围设置边框
【发布时间】：2019-06-18 06:59:16
【问题描述】：

我是 HTML、CSS、javascript 的新手。我尝试将链接设置为默认活动。但我遇到了一个问题，即第一次加载时，我的“链接图标”周围有边框。

我没有至少 10 个附加图片的声誉

所以我明确给出了链接here

实际上，我想将此 div 设置为在加载时看起来是活动的。因此，我借助 Javascript 将“在该 div 中带有图标的链接”设置为默认活动。但是当第一次加载 HTML 页面时，我无法更改完整 div 的颜色。所以我再次借助 Javascript 并再次获得成功。但我现在面临一个问题，即我在链接图标周围设置了一个边框。

这里是代码-

HTML-

<div class="row hnss m-0 p-0">
<div class="col-3 p-0" id="tabDivs1"><a class="tabClick" id="tabLinks1" href="#" onmousedown="colorTheSelected1()" ><i class="fas fa-home fa-2x"></i></a></div>
<div class="col-3 p-0" id="tabDivs2"><a class="tabClick" id="tabLinks2"  href="#" onmousedown="colorTheSelected2()"><i class="fas fa-bell fa-2x"></i></a></i></div>
<div class="col-3 p-0" id="tabDivs3"><a class="tabClick" id="tabLinks3"  href="#" onmousedown="colorTheSelected3()"><i class="fas fa-search fa-2x"></i></a></i></div>
<div class="col-3 p-0" id="tabDivs4"><a class="tabClick" id="tabLinks4"  href="#" onmousedown="colorTheSelected4()"><i class="fas fa-cog fa-2x"></a></i></div>
</div>

CSS-

.hnss div a
{
top:50%;
left:50%;
transform: translate(-50%, -50%); 
position:absolute;
color: #fafafa;

}

.hnss div a:focus
{
background-color: #4fc3f7;
color:white;
}
/*I have trid the below code, but it didn't work*/
.hnss div a i 
{
border:none;
}

Javascript-

var checkIt = document.getElementById("tabLinks1").focus();


// Just For Giving My work a try, I used The Below code
document.getElementById('tabLinks1').style.border="0"


document.getElementById("tabDivs1").style.backgroundColor="#4fc3f7"

【问题讨论】：

在照片的给定链接中，“家”的图标周围有一个边框。
使用您的浏览器开发工具找出边框（或轮廓）来自何处，以便您知道需要覆盖的确切内容。
How To Remove Outline Border From Input Button的可能重复
我下面的答案能解决问题吗？
@MoaazBhnas 谢谢你的建议，我会记住的

标签： javascript html css

【解决方案1】：

CSS：

.hnss div a:focus, .hnss div a:focus{
    outline: none;
}

或

*:focus {
    outline: none;
}

https://css-tricks.com/almanac/selectors/f/focus/

【讨论】：

老兄，你是伟大的。你在一秒钟内解决了我的问题。
感谢大家的贡献和帮助，非常感谢您的帮助

【解决方案2】：

用途：

.hnss div a i {
   outline:none;
}
.hnss div a i ::-moz-focus-inner {
   border: 0;
}

这包括 Chrome 和 Firefox。

更多信息可见：How To Remove Outline Border From Input Button

【讨论】：