Question

我是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"

Answer 1

Css：

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

或

*:focus {
    outline: none;
}

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

Answer 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

默认情况下将其设置为活动状态时，在图标周围获得边框

2 个答案: