admin管理员组

文章数量:1640611

前言

最近业务场景中遇到比较多的一个需求,当正在执行异步操作时,需要将一些按钮置灰,并不可用。今天总结一下。

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;<

本文标签: 样式属性按扭Radiodisabled