纯css完成选定切换实际效果的示例

日期：2021-01-20 类型：科技新闻我要分享

关键词：快速建站，网站建设系统，免费网页建站，网站免费建设，建站系统

近期不太忙，多写几篇文章内容。许多情况下大家用js来完成视觉效果实际效果，实际上无需那末不便，把握1些常见的css专业知识能让你事倍功半，这篇文章内容讲的是应用纯css来完成1个目录项的选定实际效果，期待对你有一定的协助

先上连接，点一下预览https://codepen.io/Ritr/pen/Bgqemr

完成这个实际效果只必须简易3步走：

0：写1个简易的目录，而且原始化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>iPhone</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挑选器，挑选总体目标。假如你想对一些元素加上一些视觉效果实际效果的情况下，最先选定它，再写1些特殊的css以差别于别的元素

input:checked + span{
  color:#F66;
  font-weight:bold;
  background:#ff0;
}

2：掩藏radio，radio默认设置是个小圈圈，大家先把它掩藏起来，具体上会根据label标识的for特性来完成对radio的选定

input[type="radio"]{
  display:none;
}

3:提升款式，这样会骚微漂亮1点点

li label,
li label span{
  display:inline-block;
  width:100%;
}

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。

上一篇：CSS高級技能:网页页面合理布局返回下一篇：没有了