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;
}
bootstrap学习之利用CSS属性pointer-events禁用表单控件的更多相关文章
- bootstrap -- css -- 表单控件
若干css样式 .form-control { display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14p ...
- 表单控件 css的三中引入方式css选择器
1. 表单控件: 单选框 如果两个单选的name值一样,会产生互斥效果 <p> <!--单选框--> 男<input type="radio" nam ...
- Bootstrap的表单控件
支持的表单控件 Bootstrap 支持最常见的表单控件,主要是 input.textarea.checkbox.radio 和 select. 输入框(Input) 最常见的表单文本字段是输入框 i ...
- Bootstrap系列 -- 18. 表单控件大小
前面看到的表单控件都正常的大小.可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置.不过Bootstrap框架还提供了两个不同的类名, ...
- Bootstrap系列 -- 14. 表单控件输入框input
每一个表单都是由表单控件组成.离开了控件,表单就失去了意义.接下来的我们简单的来了解Bootstrap框架中表单控件的相关知识. 单行输入框,常见的文本输入框,也就是input的type属性值为tex ...
- bootstrap 表单控件 控件状态 控件大小 help-block
bootstrap 表单控件 控件状态 控件大小 help-block <!DOCTYPE html> <html lang="en"> <head& ...
- vue.js基础知识篇(3):计算属性、表单控件绑定
第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html><html lang="en" ...
- Bootstrap历练实例:表单控件大小
表单控件大小 您可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度. 实例: <!DOCTYPE html><html><hea ...
- Bootstrap关于表单控件(按扭)
按钮也是表单重要控件之一,制作按钮通常使用下面代码来实现: ☑ input[type=“submit”] ☑ input[type=“button”] ☑ input[type=“r ...
随机推荐
- 201521123064 《Java程序设计》第6周学习总结
1. 本章学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...
- 201521123030《Java程序设计》第1周学习总结
#1. 本章学习总结 你对于本章知识的学习总结 了解了java的发展简介 认识了jvm/jre/jdk的联系,学习安装jdk java好麻烦的说... 1.为什么java程序可以跨平台运行?执行jav ...
- 201521123115 《Java程序设计》第1周学习总结
1. 本周学习总结 之前一直没有用心学,这周上课虽然认真但还是太多不懂加上还要补考没有时间来消化所以很多都是囫囵吞枣,希望能够赶快补上把. 知道了java的前世今生,JVM/JRE/JDK,JVM就是 ...
- 201521123099 《Java程序设计》第11周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1. ...
- MyBatis框架(一)
MyBatis介绍: MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code,并且改名为 ...
- 一篇搞定Python正则表达式
1. 正则表达式语法 1.1 字符与字符类 1 特殊字符:\.^$?+*{}[]()| 以上特殊字符要想使用字面值,必须使用\进行转义 2 字符类 1. 包含在[]中的一个或者多个字符被称为字符 ...
- [UIKit学习]02.关于UIButton
按钮的功能比较多,既能显示文字,又能显示图片,还能随时调整内部图片和文字的位置 按钮也是一种容器,在这一点上跟UIView类似 按钮的三种状态 normal(普通状态) 默认情况(Default) 对 ...
- Scanner(键盘录入)
注意事件: 1: 当使用Scanner类时 切记不要做从键盘输入一个int数 再输入一个字符串 这样会导致bug就是字符串会读取不到几所输入的内容 原因是因为:当你用了NextInt()方法时,再按了 ...
- 这是一名Java学者关于学习方向的建议
无可厚非,编程是一门艺术.但是辉煌的背后必须是一段辛苦的奋斗过程,而过程的引导方向就是最重要的一环.Java语言可谓是引领了编程的潮流,你会是怎样去学的呢? 这是一名Java学者的学习方向的建议 注: ...
- 常用git指令
git checkout -b newBranchName //与当前分支内容相同! git checkout -b 本地分支 origin xxx//远程分支 在本地新建一个分支,并把远程分支的代码 ...