html - 点击后按钮颜色

Question

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

        <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;
}

Answer 1

很可能您将不得不重写 Bootstrap 的 :focus 样式以及 :hover —— 如果您只是希望 hover 和 focus 样式相同，您可以这样做:

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

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