被点击后的按钮颜色

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

来源

2016-01-23 sammyb123

能否请您复制的问题，在[小提琴]（https://jsfiddle.net/）或[codepen（HTTP ：//codepen.io/）例子，所以我们可以更好地帮助你。 – Yass

非常感谢您提供帮助。这里是codepen的链接 – sammyb123

http://codepen.io/sammyb123/pen/QyQaPr – sammyb123

很可能你将不得不重写引导的:focus风格以及:hover - 如果你只是想在悬停和重点款式是可以做到这一点是相同的：

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

否则添加一个单独的规则只适用于.arrowbtn:focus并使用您想要的任何样式。根据您的设计，您也可以使用:active。

来源

2016-01-23 20:05:22 ryantdecker

谢谢。那解决了一半的问题，还有蓝色的边框。我尝试过边框：无;但仍然没有。 – sammyb123

蓝色轮廓/发光可能是浏览器默认的对焦风格。你可以尝试'outline：none;'通常会覆盖它。这种风格是为了帮助那些用键盘浏览网站的用户（通常是因为残疾人等）知道他们在页面中的位置，所以建议用设计中更具吸引力的替代风格替换这种风格。也就是说，许多网站只是简单地消除它，你当然有这个权利 - 我只是认为理解其含义是很重要的。 – ryantdecker

你是男人。这个技巧加上我学到了新的东西。非常感谢你。 – sammyb123

你可以声明：

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

按钮元素本身

来源

2016-01-23 20:18:10 steveben

被点击后的按钮颜色

回答

相关问题