纯css实现选中切换效果

phodal 发布于2019-08-30 11:21 / 2418人阅读

最近不太忙，多写几篇文章。很多时候我们用js来实现视觉效果，其实不用那么麻烦，掌握一些常用的css知识能让你事半功倍，这篇文章讲的是使用纯css来实现一个列表项的选中效果，希望对你有所帮助

先上链接，点击预览https://codepen.io/Ritr/pen/B...

实现这个效果只需要简单三步走：
0：写一个简单的列表，并且初始化css

html代码

你喜欢哪种水果

香蕉
苹果
橘子

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的总结，如果对你有所帮助希望你点个赞。谢谢

GPU云服务器云服务器纯CSS 点击选中效果 html表格选中效果切换效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114937.html

纯CSS实现网站常用的五角星评分和分数展示交互效果

摘要：技术我们使用一些特殊的选择器，然后配合单选框以及复选框自带的一些特性，可以实现元素的显示隐藏效果。当接口返回的分数是分的时候，刚好占据一半的星星，星半，只要计算出百分比就行，只用管数据，用上数据驱动的特点来动态展示样式这个简直不要太容易。最近做的一个项目涉及到评分和展示分数的模块，UI设计师也给了几个切好的图片，实现五角星评分方式很多，本质爱折腾的精神和对性能追求以及便于维护的考虑，...

Towers 2019-08-29 12:20 评论0 收藏0
纯CSS实现网站常用的五角星评分和分数展示交互效果

摘要：技术我们使用一些特殊的选择器，然后配合单选框以及复选框自带的一些特性，可以实现元素的显示隐藏效果。当接口返回的分数是分的时候，刚好占据一半的星星，星半，只要计算出百分比就行，只用管数据，用上数据驱动的特点来动态展示样式这个简直不要太容易。最近做的一个项目涉及到评分和展示分数的模块，UI设计师也给了几个切好的图片，实现五角星评分方式很多，本质爱折腾的精神和对性能追求以及便于维护的考虑，...

wyk1184 2019-08-20 15:31 评论0 收藏0
纯CSS实现网站常用的五角星评分和分数展示交互效果

摘要：技术我们使用一些特殊的选择器，然后配合单选框以及复选框自带的一些特性，可以实现元素的显示隐藏效果。当接口返回的分数是分的时候，刚好占据一半的星星，星半，只要计算出百分比就行，只用管数据，用上数据驱动的特点来动态展示样式这个简直不要太容易。最近做的一个项目涉及到评分和展示分数的模块，UI设计师也给了几个切好的图片，实现五角星评分方式很多，本质爱折腾的精神和对性能追求以及便于维护的考虑，...

Tony_Zby 2019-08-01 16:35 评论0 收藏0
纯CSS+HTML自定义checkbox效果

摘要：应该是一个比较常用的功能了，不过浏览器自带的往往样式不怎么好看，而且不同浏览器效果也不一样。出于美化和统一视觉效果的需求，的自定义就被提出来了。个人建议用的和伪元素和是一个东西。 checkbox应该是一个比较常用的html功能了，不过浏览器自带的checkbox往往样式不怎么好看，而且不同浏览器效果也不一样。出于美化和统一视觉效果的需求，checkbox的自定义就被提出来了。这里对实...

sevi_stuo 2019-08-28 18:15 评论0 收藏0
CSS效果篇--纯CSS+HTML实现checkbox的思路与实例

摘要：出于美化和统一视觉效果的需求，的自定义就被提出来了。这里对实现方法做个总结。实现思路纯实现的主要手段是利用标签的模拟功能。个人建议用的和伪元素和是一个东西。向拥有键盘输入焦点的元素添加样式。向已被访问的链接添加样式。 checkbox应该是一个比较常用的html功能了，不过浏览器自带的checkbox往往样式不怎么好看，而且不同浏览器效果也不一样。出于美化和统一视觉效果的需求，chec...

qingshanli1988 2019-08-01 18:22 评论0 收藏0