最近不太忙,多写几篇文章。很多时候我们用js来实现视觉效果,其实不用那么麻烦,掌握一些常用的css知识能让你事半功倍,这篇文章讲的是使用纯css来实现一个列表项的选中效果,希望对你有所帮助
先上链接,点击预览https://codepen.io/Ritr/pen/Bgqemr
实现这个效果只需要简单三步走:
0:写一个简单的列表,并且初始化css
html代码
<p>你喜欢哪种水果</p> <ul> <li> <label for="banana"> <input type="radio" id="banana" name="fruit"> <span>香蕉</span> </label> </li> <li> <label for="apple"> <input type="radio" id="apple" name="fruit"> <span>苹果</span> </label> </li> <li> <label for="orange"> <input type="radio" id="orange" name="fruit"> <span>橘子</span> </label> </li> </ul>
css代码
ul,li{ list-style-type:none; } ul{ border:1px solid #000; padding:5px; width:200px; } li{ margin:2px; background:#ccc; }
1:使用css选择器,选择目标。如果你想对某些元素添加某些视觉效果的时候,首先选中它,再写一些特定的css以区别于其他元素
input:checked + span{ color:#F66; font-weight:bold; background:#ff0; }
2:隐藏radio,radio默认是个小圈圈,我们先把它隐藏起来,实际上会通过label标签的for属性来实现对radio的选中
input[type="radio"]{ display:none; }
3:优化样式,这样会骚微好看一点点
li label, li label span{ display:inline-block; width:100%; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
css,选中切换
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
岱庙资源网 Copyright www.zgmyg.com
暂无“纯css实现选中切换效果的示例”评论...
更新日志
2024年11月15日
2024年11月15日
- 炉石传说月初最强卡组有哪些 2024月初最强上分卡组推荐
- 狼人杀亮相原生鸿蒙之夜 假面科技强势登陆华为生态
- 12小时光线挑战!AI画质专家才是大平层首选
- 2024游戏IP报告:1~9月规模1960亿 68%用户愿为之付费
- 群星.2024-今夜一起为爱鼓掌电视剧原声带【相信音乐】【FLAC分轨】
- BIGFOUR.2013-大家利事【寰亚】【WAV+CUE】
- 李美凤.1992-情深透全情歌集【EMI百代】【WAV+CUE】
- 田震2024-《时光音乐会》[金峰][WAV+CUE]
- 群星《监听天碟3》[LECD]限量版[WAV+CUE]
- 心妤《声如夏花HQ》头版限量编号[WAV+CUE]
- 群星《摇滚五杰》[低速原抓WAV+CUE][1.1G]
- 群星 《2024好听新歌30》十倍音质 U盘音乐 [WAV+分轨]
- 陈慧娴《永远是你的朋友》头版限量编号MQA-UHQCD2024[低速原抓WAV+CUE]
- 曼丽·女人三十《如果·爱》限量1:1母盘直刻[低速原抓WAV+CUE]
- 刘文正《流金三十年》[6N纯银镀膜][低速原抓WAV+CUE]