纯css实现选中切换效果的示例

前端  /  管理员 发布于 7年前   183

最近不太忙，多写几篇文章。很多时候我们用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%;}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。