:checked用于匹配选中状态的表单元素如复选框、单选框和选项,:disabled用于匹配禁用状态的表单元素如输入框、按钮和下拉框。1. :checked适用于有“选中”状态的元素,常用于自定义控件外观、切换样式或实现开关效果;2. :disabled适用于不可交互的元素,用于提示用户当前状态并阻止操作;3. 两者可结合使用以处理多个状态叠加的情况;4. 实际应用时可根据需求配合javascript进行动态控制。

在网页开发中,checked 和 disabled 是两个常用的 CSS UI 状态伪类选择器,它们可以帮助我们根据表单元素的状态来应用样式。虽然它们看起来都和“状态”有关,但实际用途和使用场景是不一样的。

:checked 伪类:控制选中状态的样式
:checked 主要用于 、 和 元素,用来匹配当前被选中的状态。
举个简单的例子:
立即学习“前端免费学习笔记(深入)”;

input[type="checkbox"]:checked { accent-color: red;}
这段代码的意思是,当复选框被选中时,它的颜色会变成红色(注意:accent-color 是控制原生控件颜色的属性)。
常见用途包括:
自定义单选按钮或复选框的外观根据用户选择切换其他元素的样式实现纯 CSS 的开关效果(比如隐藏原生控件,用自定义图标代替)
需要注意的是,:checked 只适用于有“选中”状态的元素,不能用在普通的输入框或者按钮上。
:disabled 伪类:控制禁用状态的样式
:disabled 则用于匹配处于禁用状态的表单元素,比如 、、 或者 。
ImagetoCartoon
一款在线AI漫画家,可以将人脸转换成卡通或动漫风格的图像。
106 查看详情
例如:
input[disabled] { background-color: #eee; color: #999;}
这样可以让用户更直观地看出这个输入框是不可交互的。
一些实用场景:
表单提交前某些字段被锁定动态控制按钮是否可点击提示用户某些操作暂时不可用
要注意的是,:disabled 不仅影响样式,还会阻止用户与元素交互。它通常是在 HTML 中通过添加 disabled 属性来触发的。
它们之间的区别和配合使用
虽然 :checked 和 :disabled 都是伪类选择器,但它们的作用完全不同:
:checked 关注的是“有没有被选中”:disabled 关注的是“能不能被操作”
有时候你可能需要同时判断多个状态,比如一个被禁用的复选框是否被选中,可以这样写:
input[type="checkbox"]:checked:disabled { opacity: 0.5;}
这在设计灰化界面或者权限控制页面时非常有用。
小贴士:浏览器兼容性和替代方案
:checked 在现代浏览器中支持良好,但在旧版 IE 中可能有问题如果你想完全自定义控件样式,通常会结合隐藏原生控件 + 使用伪元素实现视觉样式对于动态状态控制,有时还需要配合 JavaScript 来监听变化并更新样式
基本上就这些了。掌握这两个伪类,可以让你的表单交互更直观、更有层次感。
以上就是CSS UI状态伪类选择器:checked和disabled的详细内容,更多请关注创想鸟其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1102236.html
微信扫一扫
支付宝扫一扫