css3 选择器:元素状态伪类选择器(二)

:checked
:enabled
:disabled
  • :checked
<style>
label {background-color: red; display: block;}
:checked{width: 50px;}
</style>
<body>
    <label><input type="checkbox"> 1-1 </label>
    <label><input type="checkbox"> 1-2 </label>
    <label><input type="radio" name="test"> 2-1 </label>
    <label><input type="radio" name="test"> 2-2 </label>
</body>

:checked 适配 radiocheckbox 中被选中的元素。

  • :enabled
<style>
label {background-color: red; display: block;}
:enabled{width: 50px;}
</style>
<body>
    <label><input type="checkbox"> 1-1 </label>
    <label><input disabled type="checkbox"> 1-2 </label>
    <label><input type="radio" name="test"> 2-1 </label>
    <label><input type="radio" name="test"> 2-2 </label>
</body>

匹配所有非 disabled 状态下的表单元素,该选择器与 :disabled 选择器是对立的。

  • :disabled
<style>
label {background-color: red; display: block;}
:disabled{width: 50px;}
</style>
<body>
    <label><input type="checkbox"> 1-1 </label>
    <label><input disabled type="checkbox"> 1-2 </label>
    <label><input type="radio" name="test"> 2-1 </label>
    <label><input type="radio" name="test"> 2-2 </label>
</body>

匹配所有带 disabled 属性的表单元素,该选择器与 :enabled 选择器是对立的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一、属性选择器 Element[attr]只使用属性名,但没有确定任何属性值p[cxy]{background: ...
    EndEvent阅读 3,089评论 0 0
  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 13,301评论 0 8
  • (1). 阴影模糊半径与阴影扩展半径的区别:阴影模糊半径:此参数可选,其值只能是为正值,如果其值为0时,表示阴影不...
    Leisure_blogs阅读 5,429评论 0 6
  • 在学习weex的过程中看到了常用标签相关的内容,为了自己以后能够快速查阅特整理出此文档。 a 简介组件定义了指向某...
    TyroneTang阅读 10,204评论 1 3
  • 随着城市建设规划的进程,古老的龙城太原焕发出现代化的勃勃生机。立冬之日,摄影师登上即将开业的华宇百花谷大厦顶层,俯...
    北冥鱼_983f阅读 4,266评论 4 6

友情链接更多精彩内容