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 ...
随机推荐
- 201521123060《Java程序设计》第1周学习总结
1. 本章学习总结 认识和了解了Java的发展进程: 了解了相关开发工具: 认识了JVM,JRE,JDK: 2. 书面作业 Q1.为什么java程序可以跨平台运行?执行java程序的步骤是什么?(请用 ...
- sublime text 按下Ctrl + B 显示空白的解决办法
环境:windows xp , sublime text 2 条件:环境变量也已经设置好,可是无论怎么编译都是空白,如图: 于是鄙人百度之,发现不少网友都有这样的问题,但是网上给出的的解决方案千篇一律 ...
- 201521123114 《Java程序设计》第13周学习总结
1.本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu. ...
- MyBatis学习(五)resultMap测试
resultMap是MyBatis最强大的元素,它的作用是告诉MyBatis将从结果集中取出的数据转换成开发者所需要得对象. 接下来我们对resultMap进行一个简单测试.(当所需要返回的对象是一个 ...
- day12<常见对象+>
常见对象(Scanner的概述和方法介绍) 常见对象(Scanner获取数据出现的小问题及解决方案) 常见对象(String类的概述) 常见对象(String类的构造方法) 常见对象(String类的 ...
- 使用apache反向代理tomacat
起源 在大部分的生产环境中,基本上使用的都是java程序,从而促进了各种应用程序中间件的产生,在这里大概有几种,tomcat作为最著名的开源servlet容器,jboss也是开源的,而且有管理界面,主 ...
- Writing Science 7.10 (The Opening and The Funnel)
Opening: 1.文章的第一句话必须要达到如下目标:找出推动研究的问题,介绍内容,并确定本文针对的观众.如果你足够聪明的话甚至可以将遇到的挑战以及结论写进来. 2.通过第一段话建立本文的重点和基调 ...
- 深入理解String的关键点和方法
String是Java开发中最最常见的,本篇博客针对String的原理和常用的方法,以及String的在开发中常见问题做一个整体性的概括整理.因为之前对String的特性做过一些分析,所以不在详细描述 ...
- ubuntu12.04添加程序启动器到Dash Home
ubuntu12.04 dash home中每个图标对应/usr/share/applications当中的一个配置文件(文件名后缀为.desktop).所以要在dash home中添加一个自定义程序 ...
- C++拷贝构造函数专题
C++拷贝构造函数 在定义任何C++类时,拷贝空置操作都是必要部分,类需要控制拷贝.赋值和销毁对象时发生的行为.拷贝构造函数的用途:当创建了一个新对象时,可以用另一个对象的数据初始化这个新建的对象. ...