引导按钮未取消选择

Question

我正在使用引导程序来设置页面上的按钮样式，在 Chrome 37 中，这些按钮在我单击后不会取消选择。

有问题的按钮很简单：

<button type="button" class="btn btn-primary">Primary</button>

一个完整的例子可以在这里找到link。

同样的例子在 Firefox 中也能正常工作。而且我很确定在最近一次更新之前就在 Chrome 中工作。

有没有办法让这个按钮在 Chrome 中正常工作？

编辑：

下面的帖子修复了按钮的样式，但不幸的是没有修复按钮的行为。

如果在单击按钮后有一个动作与 onClick 挂钩，则在按下返回时将重新触发该动作。这不会发生在 Firefox 或旧版本的 chrome 中。 Fiddle example.

Answer 1

将此添加到您的 css 中

.btn:focus {
  outline: none;
}

并从

中删除 background-color: #3071a9; 和 border-color: #285e8e;

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  color: #fff;
  /*background-color: #3071a9;
  border-color: #285e8e;*/
}

Fiddle

Answer 2

我能够弄清楚。问题在于类的分组。

在您提供的小提琴中，大约在第 95 行，您有这个：

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  color: #fff;
  background-color: #3071a9;
  border-color: #285e8e;
}

如果你将注意力从其他部分中分离出来，它就会开始按你的意愿工作。

.btn-primary:focus {
    color: #fff;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  color: #fff;
  background-color: #3071a9;
  border-color: #285e8e;
}

这是因为一旦你点击它，它就会进入“聚焦”状态，直到你点击其他地方。由于您的焦点与活动和悬停相同，因此看起来它仍处于“活动”状态。

这是working fiddle。