点击后按钮颜色
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>
在按钮元素本身上
我使用 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>
在按钮元素本身上