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
进行隐藏和再现。
但是我们想跟进一步,把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>
根据caniuse的数据,:checked伪类的支持程度基本达到了100%。在下一个项目里面,你会愿意使用它嘛?
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 数据库SQL语言从入门到精通--Part 1--SQL语言概述
- DP背包(一)
- 程序员最喜欢用的在线代码编译器,什么?你竟然不知道!可以在网页敲代码,运行调试!
- ZOJ 3623 Battle Ships
- POJ 2955 区间DP必看的括号匹配问题,经典例题
- POJ 3211 Washing Clothes
- 1745 Divisibility
- POJ 3616 Milking Time
- C++面向对象编程类对象的定义
- Codeforce 1102 C. Doors Breaking and Repairing
- CodeForces - 1102B Array K-Coloring
- background-size之详解
- a伪类
- CodeForces - 1102A(思维题)
- C++使用指针,动态数组,指针做参数需要注意的问题等总结