Bootstrap按钮不能取消选择

时间:2014-10-03 22:23:40

标签: css twitter-bootstrap google-chrome

我正在使用引导程序在我的页面上设置样式按钮,在Chrome 37中,点击它们后按钮不会取消选择。

违规按钮只是:

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

可在此处找到完整示例link

这个例子在firefox中可以正常工作。我非常确定在最近的更新之前在Chrome中工作。

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

编辑:

下面的帖子修复了按钮的样式,但遗憾的是不修复按钮的行为。

如果在单击按钮后有一个连接到onClick的动作,则在按下返回时将重新触发该动作。这在firefox或旧版本的chrome中不会发生。 Fiddle example

2 个答案:

答案 0 :(得分:0)

将此添加到您的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

答案 1 :(得分:0)

我能够弄清楚。这个问题与课程分组有关。

在你提供的小提琴中,在第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