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;

}