css 伪类选择器:checked实例讲解

时间:2016-07-30
在表单元素中,单选按钮radio和复选框checkbox都具有“选中”和“未选中”状态。在CSS3中,我们可以通过使用:checked选择器来定义选中时的CSS样式。本文章向大家介绍css :checked伪类选择器的使用方法和基本使用实例,需要的朋友可以参考一下。

css :checked伪类选择器介绍

css :checked伪类选择器用于选择匹配所有被选中的单选按钮(radio)或复选框(checkbox),你可以结合:checked伪类选择器和:not选择器来匹配选择没有被选中的单选按钮或复选框。

语法:

:checked { 
   style properties 
}

如:

input:checked{
   background-color:red;
}

设置被选中的单选按钮(radio)或复选框(checkbox)的背景颜色为红色(单选框和复选框只有在Opera浏览器上才能设置背景颜色)

 

css :checked伪类选择器实例

为所有选中的单选按钮和复选框元素设置背景颜色:

<!DOCTYPE html>
<html>
<head>
<style> 
input:checked
{
background:#ff0000;
}
</style>
</head>
<body>

<form action="">
<input type="radio" checked="checked" value="male" name="gender" /> Male<br>
<input type="radio" value="female" name="gender" /> Female<br>
<input type="checkbox" checked="checked" value="Bike" /> I have a bike<br>
<input type="checkbox" value="Car" /> I have a car 
</form>

<p><b>Note:</b> This example works properly only in Opera!</p>

</body>
</html>

在线运行

 

css :checked伪类选择器妙用

在前端开发中,我们常用:hover伪类来设置鼠标悬浮时的样式,而由于checked状态的改变需要用户进行点击操作,使用:checked伪类,我们则可以设置鼠标点击后的状态。在使用zepto、jQuery库时,有一个经常使用的方法toggle用来隐藏和再现页面上的某个元素,了解:checked伪类的定义之后,我们完全可以用纯CSS实现toggle效果。

首先定义页面结构:

  <style>
     .toggle-item{
         width: 100px;
         height:  100px;
         background-color: pink;
     }
   </style>
   <div class="toggle">
       <input id="toggle-trigger" type="checkbox" />
      <div class="toggle-item"></div>
  </div>

接着,我们对 #toggle-trigger 的选中态进行设置

#toggle-trigger:not(checked) ~  .toggle-item{
       display: block;
     }
   #toggle-trigger:checked  ~  .toggle-item{
       display: none;
     }

此时,我们通过点击选中或者取消选中checkbox,就能对 .toggle-item 进行隐藏和再现。

css 伪类选择器:checked实例讲解

但是我们想跟进一步,把toggle-trigger的范围扩展到checkbox之外,因为在展现toggle效果时,触发toggle的部分并不局限于checkbox一种形式。这时我们只需要使用label标签即可,label标签有一个for属性,通过设置for属性,可以将label标签指向特定的input元素,同时将checkbox隐藏,既可以达到点击label标签来触发toggle的效果。

<style>
 .toggle-item{
     width: 100px;
     height:  100px;
     background-color: pink;
 }
 #toggle-trigger {
    display: none;
 }
 #toggle-trigger ~ :not(checked) ~  .toggle-item{
    display: block;
 }
 #toggle-trigger:checked  ~  .toggle-item{
   display: none;
 }
</style>
    <div class="toggle">
       <label for="toggle-trigger">触发器</label>
       <input id="toggle-trigger" type="checkbox" />
      <div class="toggle-item"></div>
    </div>

css 伪类选择器:checked实例讲解

根据caniuse的数据,:checked伪类的支持程度基本达到了100%。在下一个项目里面,你会愿意使用它嘛?

上一页 下一页

原文地址:http://www.manongjc.com/article/1283.html