bootstrap学习之利用CSS属性pointer-events禁用表单控件

参考链接：

CSS3 pointer-events:none应用举例及扩展

 

首先pointer-events在除去SVG中的应用只有两个值：AUTO | NONE

pointer-events:none

该属性可以让应用此属性的元素都会变成“真空”，比如：一个a连接上面覆盖一个div,当该div的css属性中有该属性时，该div就像不存在一样，可以直接点击到下方的a标签

这是一个很神奇的属性，Bootstrap就是利用这个属性，实现禁用控件的效果。

Bootstrap中实现禁用效果有两个方法：

方法1：在标签中添加disabled属性

方法2：在元素标签中添加类名“disabled”

两者的主要区别是：

“.disabled”样式不会禁止按钮的默认行为，比如说提交和重置行为等。如果想要让这样的禁用按钮也能禁止按钮的默认行为，则需要通过JavaScript这样的语言来处理。对于<a>标签也存在类似问题，如果通过类名“.disable”来禁用按钮，其链接行为是无法禁止。而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。

.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
pointer-events: none;
cursor: not-allowed;
filter: alpha(opacity=65);
  -webkit-box-shadow: none;
box-shadow: none;
opacity: .65;
}