点击后的按钮颜色答案

【问题标题】：Button color after being clicked点击后的按钮颜色
【发布时间】：2016-04-30 07:23:24
【问题描述】：

我使用 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;
}

【问题讨论】：

您能否将问题复制到fiddle 或codepen 示例中，以便我们更好地帮助您。
非常感谢您提供帮助。这是codepen的链接
codepen.io/sammyb123/pen/QyQaPr

标签： html css button hover background-color

【解决方案1】：

您很可能必须覆盖引导程序的 :focus 样式以及 :hover -- 如果您只是希望悬停和焦点样式相同，您可以这样做：

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

否则为.arrowbtn:focus 添加一个单独的规则并使用您希望它具有的任何样式。根据您的设计，您可能还需要使用 :active。

【讨论】：

谢谢。解决了一半的问题，仍然有蓝色边框。我试过边界：无；但仍然没有。
蓝色轮廓/发光可能是浏览器默认的焦点样式。您可以尝试outline:none;，它通常会覆盖它。这种风格的存在是为了帮助使用键盘导航网站的用户（通常是因为残疾等）知道他们在页面中的位置，因此建议用在您的设计中更具吸引力的替代风格替换这种风格。话虽如此，许多网站确实只是简单地消除了它，而且你当然有这个权利 - 我只是认为了解其中的含义很重要。
你就是那个男人。那成功了，而且我学到了一些新东西。非常感谢。
codepen.io/anon/pen/NxyyrB 我叉了你的笔，因为我注意到引导程序在 :active 上的样式更具体，所以当鼠标按下时它仍然闪烁蓝色（只是在它“向下”时闪烁一秒钟）。如果你想摆脱它，你将不得不使用更具体的东西（在我的 fork 中，我使用了 div 包装你的按钮的 ID）作为:active 上的选择器。它只影响其中一组，但我相信你明白了:-)
再次感谢。它的外观和行为并非我想要的那样。

【解决方案2】：

你可以声明：

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

按钮元素本身

【讨论】：