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属性可将输入框设为只读状态,只读状态的输入框呈灰色显示,但依然使用普通光标。