CSS3 CSS3:default选择器、:checked选择器和:indeterminate选择器

[复制链接]
攻城狮 发表于 2015-9-9 16:33:35 [CSS3] 显示全部楼层 |阅读模式 上一主题 下一主题

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
今天我们再来学习一下复选框和单选框的选择器,:default选择器、:checked选择器和:indeterminate选择器

:default状态伪类选择器用来指定当前元素处于非选取状态的单选框或复选框的样式;
:checked状态伪类选择器用来指当前元素处于选取状态的单选框或复选框状态的样式;
:indeterminate状态伪类选择器用来指定当页面打开时,某组中的单选框或复选框元素还没有选取状态的时样式;

案例代码
  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <meta charset="gb2312">
  5.         <title>CSS3:default选择器、:checked选择器和:indeterminate选择器</title>
  6.         <style type="text/css">
  7.         *{margin:0; padding:0;}
  8.         body{margin-bottom:20px; font-size:14px;}
  9.             #content{margin:30px auto; padding:10px; width:300px; overflow:hidden;}
  10.                 label{display:inline; margin-bottom:5px; width:150px; height:25px; line-height:25px; float:left;}
  11.                 input[type=checkbox]:default{border:2px #00f solid;}
  12.                 input[type=checkbox]:checked{border:2px #f00 solid;}
  13.                 input[type=radio]:indeterminate{border:2px #0ff solid;}
  14.         </style>
  15.     </head>
  16.    
  17.     <body>
  18.         <div id="content">
  19.             <label for="checkbox1"><input id="checkbox1" name="web" type="checkbox" checked/>前端</label>
  20.             <label for="checkbox2"><input id="checkbox2" name="web" type="checkbox"/>前端开发</label>
  21.             <label for="checkbox3"><input id="checkbox3" name="web" type="checkbox"/>web前端开发</label>
  22.             <label for="checkbox4"><input id="checkbox4" name="web" type="checkbox"/>前端开发网</label>
  23.             <label for="checkbox5"><input id="checkbox5" name="web" type="checkbox"/>W3Cfuns</label>
  24.             <label for="radio1"><input id="radio1" name="web" type="radio"/>男</label>
  25.             <label for="radio2"><input id="radio2" name="web" type="radio"/>女</label>
  26.         </div>
  27.     </body>
  28. </html>
复制代码






上一篇:CSS3:read-only选择器和:read-write选择器
下一篇:CSS3::selection选择器

大神点评2

毛毛熊200 发表于 2015-9-9 18:01:33 [CSS3] 显示全部楼层
学习了
苏门蒲元 发表于 2015-9-20 12:59:45 [CSS3] 显示全部楼层
好贴,要顶起来,谢谢分享!
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

快速回复 返回顶部 返回列表