css样式退出效果(纯css实现选中切换效果的示例)
类别:Web前端 浏览量:362
时间:2022-04-03 13:08:35 css样式退出效果
纯css实现选中切换效果的示例最近不太忙,多写几篇文章。很多时候我们用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%; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
热门推荐
- php设置上传文件代码(PHP大文件切割上传并带进度条功能示例)
- android系统如何截屏(Android实现矩形区域截屏的方法)
- dedecms如何使用标签(dedecms模板标签如何做判断示例代码)
- dedecms栏目怎么调用友情链(DedeCms用SQL语句调用数据库任意内容方法)
- firebug使用方法
- dockervolume迁移工具(Docker中数据卷volume管理的两种方式)
- 缓存系统机制(Smarty缓存机制实例详解三种缓存方式)
- php去水印方法(PHP开发的文字水印,缩略图,图片水印实现类与用法示例)
- python3.8爬虫需要的包(python爬取基于m3u8协议的ts文件并合并)
- sql两列合并成一列格式(SQL 将一列拆分成多列的三种方法)