前言
最近业务场景中遇到比较多的一个需求,当正在执行异步操作时,需要将一些按钮置灰,并不可用。今天总结一下。
diabled属性
disabled禁用表单字段。
无法使用和无法点击
被禁用的表单元素不会被提交
不适用于
浏览器带有默认样式
样式部分
虽然浏览器带有默认样式,但是在某些场景,比如button元素,我们通常都会自定义样式,这样将会覆盖浏览器的默认样式,造成disabled生效时,无明显现象。
demo.png
从上图可以看出,自定义样式层叠的权重比较高,将浏览器的默认样式覆盖了。
针对所有button的disabled状态设置样式
## 使用选择器:disabled
button:disabled {
pointer-events: none;
cursor: not-allowed;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
opacity: .65;
}
## 使用选择器[disabled]
button[disabled] {
pointer-events: none;
cursor: not-allowed;
filter: alpha(opacity=65);
-webkit-box-shadow: none;<