如何使Bootstrap 3中的按钮在被单击后自动解压?

要复制我的问题,请制作一个包含一些按钮的页面,为它们提供适当的 bootstrap 类(并包含 bootstrap ):

<input id="one" type="button" class="btn btn-default" value="one">
<input id="two" type="button" class="btn btn-primary" value="two">

加载页面并单击其中一个按钮.在您单击页面上的其他位置(使用FF29和chrome35beta)之前,它会变得压抑并高亮显示.

在单击和取消单击时判断输入元素不会显示任何附加的类和从中移除的类.

下面是一个 bootstrap 按钮保持按下的示例:http://jsfiddle.net/52VtD/5166/

推荐答案

在您的示例中,按钮不会一直处于按下状态.他们留下focused人.如果希望看到差异,请执行以下操作:

  1. 单击并按住按钮.
  2. 松开.您将看到,当您松开鼠标时,按钮的外观会稍有变化,因为它不再被按下.

如果您不希望按钮在释放后保持焦点,可以指示浏览器在释放鼠标时将焦点从按钮上移开.

实例

本例使用jQuery,但是您可以使用普通JavaScript实现相同的效果.

$(".btn").mouseup(function(){
    $(this).blur();
})

100

Css相关问答推荐

视频覆盖不适用于reactjs样式的组件

MUI Reaction移除焦点上的轮廓边框

如何为垫子制作圆角- Select 所有角点上的下拉列表

在 Next.js 中使用 .modules.scss 时未应用样式

Django:Tailwind 样式不适用于具有小部件属性的模板变量

滚动弹性盒

使用 CSS 关键帧动画更改内容

创建一个CSS动画的对角线线条.

将重复的线性渐变锚定到元素的顶部

使用任意运行时字符串进行 Tailwind CSS 类定位

包含tailwind 中固定纵横比框的内容

在 css 中使用 first-of-type 效果太好了吗?

基于内容显示(show)/隐藏(hide)同级div

BEM 块、命名和嵌套

纯 CSS 复选框图像替换

Bootstrap 3 - 在每个网格列之后打印布局和中断

什么是 DOM 回流?

继承了哪些 CSS 属性?

CSS:在图像周围创建白光

在 CSS 中使用多个 @font-face 规则