bootstrap学习之利用CSS属性pointer-events禁用表单控件
2024-08-26 16:14:39
参考链接:
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;
}
最新文章
- Linux简介及常用命令使用4--linux高级命令与技巧
- Ext.get Ext.getDom Ext.getCmp 的区别
- iptables规则组成
- 【BZOJ 1455】罗马游戏
- Linq to json
- [golang学习] 在idea中code &; debug
- uva 699 The Falling Leaves dfs实现
- centos 6.3 64位安装php5.5及配置tengine
- .net程序员转战android第一篇---环境部署
- Matlab立体标定mat转换成Opencv的CvMat
- Oracle查询优化改写--------------------操作多个表
- JavaScript获取元素尺寸和大小操作总结(转载)
- 十分钟带你读懂《增长黑客》zz
- PHP防盗链的基本思想&;&;防盗链的设置方法
- 基于XML搭建Dubbo项目
- java开发C语言编译器
- redhat/centos使用service控制启动与关闭
- java反射之构造方法(三)
- hdu_5187_zhx&#39;s contest
- 为WPF中DropShadowBitmapEffect提供轻量级的替代品