radio按扭设置只读_disabled属性样式问题

2024-05-09 09:24:44

前言

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

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;

box-shadow: none;

radio按扭设置只读_disabled属性样式问题相关推荐

radio按扭设置只读_jQuery设置单选按钮radio选中/不可用的实例代码
因为本 part 是"jQuery日常使用篇",所以都是由具体需求出发,总结需要用到的知识点.代码写得未必很好,达到目标就好.那么我们先来看看这次的需求:色块模式基于彩色模式,即开 ...
radio按扭设置只读_RadioButton控件
教学思路ASP.Net之服务器控件:二.CheckBox.RadioButton.Panel.Image控件前三种控件的使用与Winform相同,Image控件可以把它想象成pictureBox控件 ...
怎样设置html的元素属性,Jquery怎么设置元素的属性和样式？
Jquery怎么设置元素的属性和样式?下面本篇文章给大家介绍一下使用jQuery操作元素属性与样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 元素属性和Dom属性对于下 ...
jq获取和设置标签的css样式、jq给标签增加或移除class属性
1.jQuery获取和设置标签的css样式 jQuery既可以直接获取标签的css样式,也可以设置样式,包括行内.内部.外部样式: 思路:先要选取这个标签,然后再获取或者设置样式: 获取css属性: ...
使用js设置input标签只读 readonly 属性
先上代码: <html><head><title> test </title><meta charset="utf-8"> ...
html vue.js readonly,使用js设置input标签只读 readonly 属性
先上代码: test function setReadonly() { //document.getElementById("test").setAttribute("r ...
form表单元素设置只读
form表单元素设置只读 CreateTime--2017年5月5日11:42:41 Author:Marydon 1.设置文本框只读  <input ...
总结Python设置Excel单元格样式的一切，比官方文档还详细。
Python对Excel表格处理非常方便,本文专门对Excel单元格样式设置进行总结,日常用到的设置基本都可以用openpyxl库完成. 创建一个表格 openpyxl是第三方库,如果你还没有安装,输 ...
总结Python设置Excel单元格样式的一切，比官方文档还详细
总结Python设置Excel单元格样式的一切,比官方文档还详细 Python对Excel表格处理非常方便,本文专门对Excel单元格样式设置进行总结,日常用到的设置基本都可以用openpyxl库完成 ...

最新文章

热门文章