单击显示默认颜色的引导按钮

我正在尝试用下面的代码设计按钮颜色,颜色会一直工作到我单击按钮,按钮显示默认颜色,如何指定按钮的颜色

.btn成功{
颜色:#ffffff;
背景色:#161617;
边框颜色:#494F57;
} 
.btn成功:悬停,
btn:成功,
.btn成功:活动,
.btn-success.active,
.open.dropdown-toggle.btn-success{
颜色:#ffffff;
背景色:#1F2838;
边框颜色:#494F57;
} 
.btn成功:活动,
.btn-success.active,
.open.dropdown-toggle.btn-success{
背景图像:无;
} 
.btn-success.disabled,
.btn成功[已禁用],
字段集[已禁用]。btn成功,
.btn成功。禁用:悬停,
.btn成功[禁用]:悬停,
字段集[已禁用]。btn成功:悬停,
.btn成功。禁用:焦点,
.btn成功[禁用]:焦点,
字段集[已禁用]。btn成功:焦点,
.btn成功。禁用:活动,
.btn成功[禁用]:活动,
字段集[已禁用]。btn成功:活动,
.btn-success.disabled.active,
.btn成功[已禁用]。处于活动状态,
字段集[已禁用].btn-success.active{
背景色:#161617;
边框颜色:#494F57;
} 
.btn成功。徽章{
颜色:#161617;
背景色:#ffffff;
}

:active选择器是单击所需的

.btn示例:活动{
//单击此处的样式
}

看起来您已经看到了上面的颜色,因此如果您仍然看到稍微不同的颜色,很可能是因为框阴影也应用于活动按钮状态。禁止这样做:

.btn示例:活动{
盒影:无;
}

编辑:
覆盖css的选择器实际上是btn success:active:focus。因此,您需要在css中添加以下内容:

btn成功:活动:焦点{
颜色:#ffffff;
背景色:#161617;
边框颜色:#494F57;
}

关于我下面的评论,您最好创建自己的类,例如btn custom,以便应用所需的样式。将其与现有的btn类相结合,您可以用更少的代码实现所需的结果,因为您不需要覆盖现有的选择器

发表评论