6.9.7 表单控件的状态
Bootstrap
对表单控件进行了界面上的改进和美化,不同状态下的表单控件具有不同的外观行为。
1.焦点状态
Bootstrap
去掉了某些表单控件默认的焦点行为(有些浏览器默认的焦点行为是应用outline
样式),Bootstrap
对焦点状态应用了box-shadow
属性。
2.禁用状态
为输入框设置disabled
属性可将输入框设为禁用状态,禁用状态的输入框呈灰色显示,还会显示not-allowed
光标。
默认情况下,如果为<fieldset>
元素添加disabled
属性,那么该元素所包含的所有表单控件都会进入禁用状态。但IE 11
及更早版本的IE浏览器并不完全支持为<fieldset>
元素添加disabled
属性,因此为了兼容IE浏览器,建议使用JS代码来禁用<fieldset>
元素。
另外需要说明的是,将<fieldset>
元素设为disabled
的可以禁用它包含的所有原生表单控件,但Bootstrap
可以将<a>
元素转换成按钮(通过设置class="btn btn-*")
。这些通过<a>
转换成的按钮将只是被添加pointer-events: none
;属性,但该属性在Opera 18
及IE 11
中并没有得到全面支持,并且不能阻止用户通过键盘导航让该按钮获得焦点,激活链接,因此也建议使用JS代码来禁止<a>
元素被转换成按钮。
3.只读状态
为输入框设置readonly
属性可将输入框设为只读状态,只读状态的输入框呈灰色显示,但依然使用普通光标。
原文链接: 6.9.7 表单控件的状态