14-Bootstrap 全局 css 样式-表单3|学习笔记

简介: 快速学习14-Bootstrap 全局 css 样式-表单3

开发者学堂课程【前端开发框架 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 来禁用这些链接。

image.png

此时若想禁用三个 input 框只需如下操作即可

image.png

其余同样

跨浏览器兼容性

虽然 Bootstrap 会将这些样式应用到所有浏范器上,Internet Expiorer 11及以下测览器中的 xflelgset)元素并不完全支持 d1sabled 属性,因此建议在这些测览器上通过 JavaScipt 代码采禁用更浅,并且还季加了 not-allone 能标状态


三、只读状态

为输入框设置 readonly 属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更找(就像被禁用的输入框一样),但是仍然保留标准的鼠标状态。


image.png

image.png

相关文章
|
Web App开发 移动开发 前端开发
|
前端开发 JavaScript 开发者
CSS 样式加载方式| 学习笔记
快速学习 CSS 样式加载方式。
CSS 样式加载方式| 学习笔记
|
前端开发 JavaScript CDN
Bootstrap全局css样式的使用
准备环境; Bootstrap全局样式的使用
275 0
Bootstrap全局css样式的使用
|
前端开发 容器
【BootStrap】图片样式、辅助类样式和CSS组件 -附源码(2)
【BootStrap】图片样式、辅助类样式和CSS组件 -附源码
122 0
【BootStrap】图片样式、辅助类样式和CSS组件 -附源码(2)
|
前端开发
【BootStrap】图片样式、辅助类样式和CSS组件 -附源码(1)
【BootStrap】图片样式、辅助类样式和CSS组件 -附源码
215 0
【BootStrap】图片样式、辅助类样式和CSS组件 -附源码(1)
|
Web App开发 开发框架 前端开发
11-Bootstrap 全局 CSS 样式-表格2|学习笔记
快速学习11-Bootstrap 全局 CSS 样式-表格2
115 0
11-Bootstrap 全局 CSS 样式-表格2|学习笔记
|
开发框架 前端开发 开发者
04-Bootstrap 全局 css 样式_栅格系统 1|学习笔记
快速学习04-Bootstrap 全局 css 样式_栅格系统 1
123 0
04-Bootstrap 全局 css 样式_栅格系统 1|学习笔记
|
开发框架 前端开发 开发者
12-Bootstrap 全局 CSS 样式-表单1|学习笔记
快速学习12-Bootstrap 全局 CSS 样式-表单1
120 0
|
开发框架 前端开发 信息无障碍
15-Bootstrap 全局 css 样式-表单3|学习笔记
快速学习15-Bootstrap 全局 css 样式-表单3
111 0