Bootstrap框架表单四

2025-11-02 08:02:37

1、焦点状态

我们将某些表单控件的默认 outline 样式移除,然后对 :focus 状态赋予 box-shadow 属性。

Bootstrap框架表单四

2、禁用状态

为输入框设置 disabled 属性可以禁止其与用户有任何交互(焦点、输入等)。被禁用的输入框颜色更浅,并且还添加了 not-allowed 鼠标状态。

Bootstrap框架表单四

3、被禁用的 fieldset

为<fieldset> 设置 disabled 属性,可以禁用 <fieldset> 中包含的所有控件。

Bootstrap框架表单四

4、<a> 标签的链接功能不受影响

默认情况下,浏览器会将 <fieldset disabled> 内所有的原生的表单控件(<input>、<select> 和 <button> 元素)设置为禁用状态,防止键盘和鼠标与他们交互。然而,如果如果表单中还包含 <a ... class="btn btn-*"> 元素,这些元素将只被赋予 pointer-events: none 属性。正如在关于 禁用状态的按钮 章节中(尤其是关于锚点元素的子章节中)所描述的那样,该 CSS 属性尚不规范,并且在 Opera 18 及更低版本的浏览器或 Internet Explorer 11 总没有得到全面支持,并且不会阻止键盘用户能够获取焦点或激活这些链接。所以为了安全起见,建议使用自定义 JavaScript 来禁用这些链接。

Bootstrap框架表单四

5、只读状态

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

Bootstrap框架表单四

6、校验状态

Bootstrap 对表单控件的校验状态,如 error、warning 和 success 状态,都定义了样式。使用时,添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。

Bootstrap框架表单四

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
相关推荐
  • 阅读量:80
  • 阅读量:161
  • 阅读量:39
  • 阅读量:96
  • 阅读量:137
  • 猜你喜欢