需要帮助才能将样式应用于按钮

Question

我正在使用bootstrap并为其应用自定义主题。我使用以下css对我的 .btn 类的变化进行了修改：

＆＃13;

＆＃13;

.btn-primary {
  border:none;
  background: linear-gradient(135deg, transparent 7px,  rgb(0,130,114) 7px)
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  border:none;
  background: linear-gradient(135deg, transparent 7px,  rgb(0,106,91)  7px)
}

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus{
  outline:none;
  box-shadow:none;
}

＆＃13;

<div class="row" style="padding-top:10px">
  <input type="submit" class="btn btn-primary col-lg-4 col-lg-offset-4"> 
</div>

＆＃13;

＆＃13;

＆＃13;

这会导致按钮看起来像这样：

这正是我想要的，但是当你点击一个按钮时，它会回到原来的矩形形状。我尝试过：active，：enabled和：focus伪类，但矩形仍然如图所示。

其他哪些伪类或元素可能导致此问题以及如何解决它。

Answer 1

只需添加background与您拥有的!important相同，不要使用.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active, .btn:active:hover, .btn.active.focus{ outline: none; box-shadow: none; background: linear-gradient(135deg, transparent 7px, rgb(0,106,91) 7px); } ：

%run "/home/JPJ/Priya_Ph.D/simple_bool/simplebool/SimpleBool-master   /BoolMutation.py"

工作：http://codepen.io/anon/pen/KgXOwb

Answer 2

<强>更新

快速修复将.btn-primary { border: none; background: linear-gradient(135deg, transparent 7px, rgb(0, 130, 114) 7px) } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { outline: none!important; border: none; background: linear-gradient(135deg, transparent 7px, rgb(0, 106, 91) 7px)!important; } 添加到后台。

  

！important是有效的CSS。你可以继承一个项目，其中   以前的开发人员使用它，或者你可能需要补丁   很快 - 所以它可以派上用场。

CSS：

{{1}}

Answer 3

＆＃34;：active：focus＆＃34;你的CSS被bootstrap覆盖了事件

包括这行代码（如下）。这将解决您的问题。

.btn-primary:active:focus {
    background: linear-gradient(135deg, transparent 7px, rgb(0,106,91) 7px);
}

干杯!! 让我知道它是否有效。 我将您的代码分叉到我的Codepen帐户并修复了该问题。 这里看看： http://codepen.io/thekamlesh/pen/ZpXgJY