点击后按钮颜色

Button color after being clicked

我使用 Boostrap 创建箭头 buttons.I 更改了 css 属性以确保按钮的背景与正文背景相同。我还更改了属性以确保没有边框并且悬停时它保持黑色。问题是当我点击它时,我周围出现了一个蓝色边框,当鼠标没有悬停在它上面时它变成了蓝色。我已经尝试了很多东西,但 none 正在工作。任何帮助将不胜感激。

        <div id="breakArrows">
            <h6>Session Break</h6>
            <button class="btn btn-info arrowbtn" > <i class="fa fa-arrow-up"></i></button>
            <h4 class="arrownum">1</h4>
            <button class="btn btn-info arrowbtn" ><i class="fa fa-arrow-down"></i></button>
        </div>
         <div id="center">

#break{
    width:20%;
    height:100%;
    background-color:black;
    float: left;
}

#breakArrows{
    width:10%;
    height:100%;
    background-color:black;
`   float:left;
    padding-left:23px;
    padding-top:175px;
}

.arrowbtn{
    background-color:black; 
    border: none;
    padding-left:33px;
    padding-top: 10px;
}

.arrowbtn:hover{
   background-color:black;
   border-color: black;
}

.arrownum{
    color:white;
    padding-left:33px;
}

h6{
    color:white;
}

您很可能必须重写 bootstrap 的 :focus 样式以及 :hover —— 如果您只是希望悬停和焦点样式相同,您可以这样做:

.arrowbtn:hover, .arrowbtn:focus {
   background-color:black;
   border-color: black;
}

否则只为 .arrowbtn:focus 添加一个单独的规则,并使用您想要的任何样式。根据您的设计,您可能还会使用 :active

你可以声明:

<button class="btn btn-info arrowbtn" style="background-color:black!important"> <i class="fa fa-arrow-up"></i></button>

在按钮元素本身上