纯css实现选中切换效果的⽰例
最近不太忙，多写⼏篇⽂章。很多时候我们⽤js来实现视觉效果，其实不⽤那么⿇烦，掌握⼀些常⽤的css知识能让你事半功倍，这篇⽂章讲的是使⽤纯css来实现⼀个列表项的选中效果，希望对你有所帮助
实现这个效果只需要简单三步⾛：好看的css代码
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%;
}
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。