开发者学堂课程【前端开发框架 Bootstrap 使用教程:14-Bootstrap 全局 css 样式-表单3】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/360/detail/4233
14-Bootstrap 全局 css 样式-表单3
目录
一、焦点状态
二、禁用状态
三、只读状态
一、焦点状态
我们将某些表单控件的默认 owtline 样式移除,然后对 :focus 状志赋予 box-shadow 属性。
二、禁用状态
为输入框设置 disabled 属性可以禁止其与用户有任何交互(焦点、输入等)。被禁用的输入框颜色更浅,并且还添加了not-allowed 鼠标状态。
被禁用的 fieldset
为<fietdsets>设置 disb1ed 属性可以禁用<fietdsets>中包含的所有控件。
<a>标签的链接功能不受影响
默认情况下,浏览器会将<fietdsets disb1ed>内所有的原生的表单控件(<input>、<select>和<button>元素)设置为禁用状态,防止键盘和鼠与他们交互。
然而,如果表单中还包含<a…class=“btn btn-*”>元素,这些元素将只被赋予 pointer-events:none 属性。
正如在关于禁用状态的按钮中(尤其是关于锚点元素的子章节中)所描述的那样,该 CSS 属性尚不规范,并且在Opera 18及更低版本的浏览器或 Internel Expilorer 11总没有得到全面支持,并且不会阻止键盘用户能够获取焦点或制活这些链接。
所以为了安全起见,建议使用自定义 JavaScnpt 来禁用这些链接。
此时若想禁用三个 input 框只需如下操作即可
其余同样
跨浏览器兼容性
虽然 Bootstrap 会将这些样式应用到所有浏范器上,Internet Expiorer 11及以下测览器中的 xflelgset)元素并不完全支持 d1sabled 属性,因此建议在这些测览器上通过 JavaScipt 代码采禁用更浅,并且还季加了 not-allone 能标状态
三、只读状态
为输入框设置 readonly 属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更找(就像被禁用的输入框一样),但是仍然保留标准的鼠标状态。