如何停止Bootstrap按钮从默认为灰色背景？

Question

发生了什么

我想要发生什么

出于某种原因，当我点击button-bullet时，background-color会恢复为Bootstrap的默认灰色，即使我将background-color设置为#FCC1C5也是如此jQuery的。

正如您在下面的jQuery代码中所看到的，我尝试添加事件click和focus以阻止background-color变为灰色。但这没有帮助。

如果有人能告诉我，我做错了什么会很棒！

我的代码

HTML 的

<div class="worksheet-problems">
                    <div class="row">
                        <div class="col-lg-7">
                            <div class="form-group">
                                <div class="input-group input-group-lg worksheet-problem">
                                    <div class="input-group-btn">
                                        <button type="button" class="btn btn-default button-bullet"> <span class="glyphicon glyphicon-one-fine-dot" aria-hidden="true"></span> </button>
                                    </div>
                                    <input type="text" name="Worksheet-Problem" class="form-control" placeholder="Problem..." aria-label="Write worksheet problem here">
                                    <div class="input-group-btn">
                                        <button type="button" class="btn btn-default button-add" aria-label="Add"> <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

CSS

/*get rid of Boostrap default grey for buttons*/
.btn.button-add, .btn.button-bullet{
  background-color: transparent;
}

.btn.red-background{
  background-color: #FCC1C5;
}

的jQuery

$(".worksheet-problems").on("mouseenter mouseleave focus click", ".button-bullet", function(){
    if ($(".worksheet-problems").children().length > 1) {
        $(this).toggleClass("red-background");
    }
});

JSFiddle

Answer 1

将按钮的:active设置为透明。

.btn.button-add, 
.btn.button-bullet, 
.btn.button-add:active, 
.btn.button-bullet:active
.btn.button-add:focus, 
.btn.button-bullet:focus {
  background-color: transparent;
  box-shadow: none;
  -webkit-box-shadow: none;
}

编辑：也可能还要包含:focus。