参考链接:

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;
}

bootstrap学习之利用CSS属性pointer-events禁用表单控件的更多相关文章

  1. bootstrap -- css -- 表单控件

    若干css样式 .form-control { display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14p ...

  2. 表单控件 css的三中引入方式css选择器

    1. 表单控件: 单选框 如果两个单选的name值一样,会产生互斥效果 <p> <!--单选框--> 男<input type="radio" nam ...

  3. Bootstrap的表单控件

    支持的表单控件 Bootstrap 支持最常见的表单控件,主要是 input.textarea.checkbox.radio 和 select. 输入框(Input) 最常见的表单文本字段是输入框 i ...

  4. Bootstrap系列 -- 18. 表单控件大小

    前面看到的表单控件都正常的大小.可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置.不过Bootstrap框架还提供了两个不同的类名, ...

  5. Bootstrap系列 -- 14. 表单控件输入框input

    每一个表单都是由表单控件组成.离开了控件,表单就失去了意义.接下来的我们简单的来了解Bootstrap框架中表单控件的相关知识. 单行输入框,常见的文本输入框,也就是input的type属性值为tex ...

  6. bootstrap 表单控件 控件状态 控件大小 help-block

    bootstrap 表单控件 控件状态 控件大小 help-block <!DOCTYPE html> <html lang="en"> <head& ...

  7. vue.js基础知识篇(3):计算属性、表单控件绑定

    第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html><html lang="en" ...

  8. Bootstrap历练实例:表单控件大小

    表单控件大小 您可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度. 实例: <!DOCTYPE html><html><hea ...

  9. Bootstrap关于表单控件(按扭)

    按钮也是表单重要控件之一,制作按钮通常使用下面代码来实现:   ☑  input[type=“submit”]   ☑  input[type=“button”]   ☑  input[type=“r ...

随机推荐

  1. 201521123049 《JAVA程序设计》 第8周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 本次作业题集集合 1.List中指定元素的删除(题目4-1) 1.1 实验总结 public ...

  2. 201521123096《Java程序设计》第九周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己 ...

  3. foreach嵌套循环

    最近几天被这个嵌套搞晕了,还好经过几天的努力终于解决了,特记录下,因为要传两个List集合到jsp页面,还都是在一起输出,发现不能把两个集合放在一个foreach,所以就写了两个foreach来接受, ...

  4. JDBC在javaweb中的应用之分页数据查询

    分页查询 分页查询是java web开发中经常使用到的技术.在数据库中数据量非常大的情况下,不适合将所有的数据全部显示到一个页面中,同时为了节约程序以及数据库的资源,就需要对数据进行分页查询操作. 通 ...

  5. [python学习笔记] 运算符

    数学运算符 与大多语言相同的运算符就不介绍了.不同的地方会用 (!不同)标出 与java相同的运算符 , - , * , % , / 不同之处 除法 (!不同) /  与java不同,整数相除,结果为 ...

  6. 再起航,我的学习笔记之JavaScript设计模式27(链模式)

    链模式 概念介绍 链模式(Operatc of Responsibility): 通过在对象方法中将当前对象返回,实现对同一个对象多个方法的链式调用.从而简化对该对象的多个方法的多次调用时,对该对象的 ...

  7. Codeforces 845 A. Chess Tourney 思路:简单逻辑题

    题目: 题意:输入一个整数n,接着输入2*n个数字,代表2*n个选手的实力.    实力值大的选手可以赢实力值小的选手,实力值相同则都有可能赢.    叫你把这2*n个选手分成2个有n个选手的队伍. ...

  8. 使用docker部署standalone cinder

    | 版权:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接.如有问题,可以邮件:wangxu198709@gmail.com 背景 OpenSta ...

  9. Sum It Up 广搜

    Sum It Up Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit St ...

  10. 宝藏(树形DP)

      这道题目是十分考验思维的,n^2应该还是比较好想的,主要是如何转移根的问题.转移根,在我看来应该是树形dp最难的一部分了, 一般学会如何转移根,也就差不多考验通吃树形dp了. 下面转一转大佬链接: ...