DDR爱好者之家

纯CSS实现iOS风格打开关闭选择框功能
站长资源 2024/11/24 佚名
43 1538
DDR爱好者之家 Design By 杰米

1 效果

纯CSS实现iOS风格打开关闭选择框功能

演示地址： https://www.albertyy.com/2020/7/check2.html 

另一篇文章：https://www.jb51.net/css/735639.html

2 知识点

2.1 <label>标签

在html中，<label>标签通常和<input>标签一起使用，<label>标签为input元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果，<label>标签的作用是为鼠标用户改进了可用性，当用户点击<label>标签中的内容时，浏览器就会自动将焦点转到和该标签相关联的控件上；<label>标签在单选按钮和复选按钮上经常被使用，使用该标签后，你点击label标签内的内容，也可以选中对应的单选按钮或复选按钮。

<label>标签语法格式：

<label for="关联控件的id" form="所属表单id列表">文本内容</label>

关联控件的id一般指的是input元素的id；在html5中还新增了一个属性form，form属性是用来规定所属的一个或多个表单的 id 列表，以空格隔开；当<label>标签不在表单标签<form>中时，就需要使用form属性来指定所属表单；

<label> 元素没有特别的样式考虑——结构上，<label> 是简单的行内元素，所以可使用和 <span> 或 <a>元素大致相同的方式来应用样式。

2.2 CSS float 属性

float属性指定一个盒子（元素）是否应该浮动。

属性值:

值 描述 left 元素向左浮动。 right 元素向右浮动。 none 默认值。元素不浮动，并会显示在其在文本中出现的位置。 inherit 规定应该从父元素继承 float 属性的值。

元素怎样浮动:

元素在水平方向浮动，即元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。

清除浮动 - 使用 clear：

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素。

注意： 绝对定位的元素忽略float属性！

2.3 CSS3 :checked 选择器

:checked 选择器匹配每个选中的输入元素（仅适用于单选按钮或复选框）。

2.4 CSS element+element 选择器

element+element 选择器用于选择（不是内部）指定的第一个元素之后紧跟的元素。

例如：选择所有紧接着 <div> 元素之后的第一个 <p> 元素:

div+p{ background-color:yellow; }

3 代码实现

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
   .Switch {
    padding: 0;
    width: 500px;
    margin: auto;
   }
 
   .Switch li {
    clear: both;
    line-height: 44px;
    border-bottom: 1px solid #CCC;
    list-style: none;
   }
 
   .Switch input {
    display: none
   }
 
   .Switch label {
    width: 52px;
    background: #CCC;
    height: 28px;
    border-radius: 14px;
    float: right;
    margin: 8px 10px 0 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset;
    cursor: pointer;
   }
 
   .Switch label em {
    width: 26px;
    height: 26px;
    float: left;
    margin: 1px;
    border-radius: 13px;
    box-shadow: 2px 3px 8px rgba(0, 0, 0, .1);
    background: #FFF;
   }
 
   .Switch input:checked+label {
    background: #a4d714;
   }
 
   .Switch input:checked+label em {
    float: right;
   }
 
   .Switch input:disabled+label {
    opacity: 0.5
   }
  </style>
 </head>
 <body>
  <ul class="Switch">
   <li>
    <input type="checkbox" name="Storage" id="date">
    默认关闭
    <label for="date"><em></em></label>
   </li>
   <li>
    <input type="checkbox" name="Storage2" id="blance" checked="">
    默认打开
    <label for="blance"><em></em></label>
   </li>
   <li>
    <input type="checkbox" name="Storage2" id="integral" disabled="">
    不可用
    <label for="integral"><em></em></label>
   </li>
  </ul>
 </body>
</html>
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米