点击后的按钮颜色

Posted 2023-03-06

【中文标题】点击后的按钮颜色

【英文标题】：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

【参考方案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>

按钮元素本身