CSS3学习笔记（九）——UI元素状态伪类选择器 :checked

通过“:checked”状态来自定义复选框效果

html

<form action="#"> <div class="wrapper"><div class="box"><input type="radio" checked="checked" id="boy" name="1"/><span></span></div><label for="boy">男</label></div><div class="wrapper"><div class="box"><input type="radio" id="girl" name="1"/><span></span></div><label for="girl">女</label></div>
</form>

css

form{margin-top: 100px;margin-left: 100px;
}
.wrapper{width: 500px;height: 30px;font-size: 18px;
}
label{float: left;margin-left: 10px;
}
.box{float: left;background: orange;position: relative;width: 25px;height: 25px;border-radius: 100%;
}
.box input{width: 100%;height: 100%;position:absolute;top:0;left: 0;/*必须设置位置，否则点击会出现不灵敏*/opacity: 0;z-index: 100;/*使input按钮在span的上一层，不加点击区域会出现不灵敏*/
}
.box span{width: 10px;height: 10px;display: block;border-radius: 100%;position: absolute;top: 30%;left: 30%;z-index:1;background: white;
}
input[type="radio"]+span{opacity: 0;
}
input[type="radio"]:checked+span{opacity: 1;
}

效果：

input[type="radio"]:checked+span：加号是相邻兄弟选择器的结合符，选择紧接在另一个元素后的元素，且两个元素必须拥有相同的父元素。比如这个选择的是type="radio"的input标签被选中时，后面紧跟的span标签。也就是改变的是这个span标签的样式

笔记整理出自：https://www.imooc.com/learn/33

CSS3学习笔记（九）——UI元素状态伪类选择器 :checked相关推荐

CSS3学习笔记1：结构性伪类选择器
第2节.结构性伪类选择器在学习结构性伪类选择器之前,先了解2个概念:sCSS中的伪类选择器&伪元素伪类选择器:CSS中已经定义好的选择器,不能随便取名常用的伪类选择器是使用在a元素上的几 ...
CSS UI状态伪类选择器
UI状态伪类选择器,用于选择处于某种状态下的UI元素,主要用于HTML表单上,根据表单元素的不同状态,定义不同的样式,来增强用户体验. 表单元素的状态包括获得焦点.失去焦点.选中.未选中.可用.不可用 ...
学习笔记（10）伪类伪元素
目录 1,伪类 2,伪元素 3,伪类伪元素的区别 3.1,相同点 3.2,不同点 1,伪类 w3c的定义:CSS伪类是用来添加一些选择器的特殊效果. 伪类是指原本存在的标签,在满足某些条件的情况下,就 ...
前端学习（219）:css伪类选择器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ html4/str ...
CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)...
使用CSS3 选择器--笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...
CSS3新增的伪类选择器
伪类选择器的作用:对已有选择器做进一步的限制,对已有选择器能匹配的元素做进一步的过滤.CSS 3提供的伪类选择器主要分为以下三类: 结构性伪类选择器 UI元素状态伪类选择器其他伪类选择器 1.结构性 ...
CSS中伪元素、伪类选择器和字体、文本相关属性
CSS中伪元素.伪类选择器伪元素选择器伪元素选择器只能针对CSS中已有的伪元素起作用. CSS提供的伪元素选择器有如下几个: :first-letter:对指定对象的第一个字符起作用. :firs ...
伪类选择器的简单介绍
一.伪类选择器介绍伪类选择器(简称:伪类)通过冒号来定义,它定义了元素的状态,如点击按下,点击完成等,通过伪类可以为元素的状态修改样式. 伪类的功能和一般的DOM中的元素样式相似,但和一般的DOM中 ...
css中什么是伪类选择器？伪类选择器的简要介绍
本章给大家带来css中什么是伪类选择器?伪类选择器的简要介绍.让大家可以了解在css中伪类选择器的作用,css伪类选择器有哪些分类等知识.有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. ...

CSS3学习笔记（九）——UI元素状态伪类选择器 :checked

CSS3学习笔记（九）——UI元素状态伪类选择器 :checked相关推荐

最新文章

热门文章