您的位置:首页 > Web前端 > > 正文

css样式退出效果(纯css实现选中切换效果的示例)

更多 时间:2022-04-03 13:08:35 类别:Web前端 浏览量:362

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%;
    }
    
    
  • 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    标签:选中切换 css