表单控件状态(禁用状态)
来源:互联网 发布:scala二维数组 编辑:程序博客网 时间:2024/06/05 07:44
Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的,在相应的表单控件上添加属性“disabled”。和其他表单的禁用状态不同的是,Bootstrap框架做了一些样式风格的处理:
/*源码请查看bootstrap.css文件第1723行~第1729行*/
.form-control[disabled],
.
.form-control[readonly],
f
fieldset[disabled] .form-control {
c
cursor: not-allowed;
b
background-color: #eee;
o
opacity: 1;
}
}
使用方法为:只需要在需要禁用的表单控件上加上“disabled”即可:
/*源码请查看bootstrap.css文件第1723行~第1729行*/
.form-control[disabled],
.
.form-control[readonly],
f
fieldset[disabled] .form-control {
c
cursor: not-allowed;
b
background-color: #eee;
o
opacity: 1;
}
}
使用方法为:只需要在需要禁用的表单控件上加上“disabled”即可:
<input class="form-control" type="text" placeholder="表单已禁用,不能输入" disabled>
在使用了“form-control”的表单控件中,样式设置了禁用表单背景色为灰色,而且手型变成了不准输入的形状。如果控件中不使用类名“form-control”,禁用的控件只会有一个不准输入的手型出来。
/*源码请查阅bootstrap.css文件第1781行~第1794行*/
input[type="radio"][disabled],input[type="checkbox"][disabled],.radio[disabled],.radio-inline[disabled],.checkbox[disabled],.checkbox-inline[disabled],fieldset[disabled] input[type="radio"],fieldset[disabled] input[type="checkbox"],fieldset[disabled] .radio,fieldset[disabled] .radio-inline,fieldset[disabled] .checkbox,fieldset[disabled] .checkbox-inline {cursor: not-allowed;}
在Bootstrap框架中,如果fieldset设置了disabled属性,整个域都将处于被禁用状态。
<form role="form"><fieldset disabled> <div class="form-group"> <label for="disabledTextInput">禁用的输入框</label> <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入"> </div> <div class="form-group"> <label for="disabledSelect">禁用的下拉框</label> <select id="disabledSelect" class="form-control"> <option>不可选择</option> </select> </div> <div class="checkbox"> <label> <input type="checkbox">无法选择 </label> </div> <button type="submit" class="btnbtn-primary">提交</button></fieldset></form>
据说对于整个禁用的域中,如果legend中有输入框的话,这个输入框是无法被禁用的。我们一起来验证一下:
<form role="form"><fieldset disabled><legend><input type="text" class="form-control" placeholder="显然我颜色变灰了,但是我没被禁用,不信?单击试一下" /></legend> …</fieldset></form>
0 0
- 表单控件状态(禁用状态)
- 表单控件状态(禁用状态)
- boostrap表单控件状态(禁用状态)
- Bootstrap表单控件状态
- Bootstrap之表单控件状态
- MFC 获取按钮等控件是否禁用状态
- 禁用视图状态
- Bootstrap3 按钮-禁用状态
- 用户帐号处于禁用状态
- 设置button的禁用状态
- boostrap表单控件状态(验证状态)失败、成功、警告等
- 表单工作流状态介绍
- Bootstrap3 表单-校验状态
- js 禁用所有表单控件
- 状态条控件(Dephi)
- 控件的鼠标状态
- Clistctrl控件选中状态
- SendMessage获取控件状态
- mybatis常见错误(文件配置)
- 表单控件大小
- Linux 文本处理工具
- ubuntu indigo skeleton tracker(骨骼跟踪)
- python使用opencv2人脸识别
- 表单控件状态(禁用状态)
- pandas数据预处理之dataframe的groupby操作
- 1047: 阿姆斯特朗数
- Python:类型
- 18. 4Sum
- opencv(9)---图像基本操作
- mysql导入数据时提示 USING BTREE 错误解决办法
- 《算法导论》第4章 分治策略 个人笔记
- secure boot 的知识