checkbox+label+selector 实现脑洞开大的效果

2023-10-12 13:39:37

技巧说明

checkbox标签虽然可以直接实现复选框，但它独特的特性可以用CSS搭配实现更强大的功能。checkbox有checked属性，在选中时为true，配合label标签和CSS的selector就可以用非常少的代码保存一个状态，再通过保存的状态来实现意想不到的效果。

示例

一、实现一个灯泡切换

代码：

<label for="lightSwitch">
  <input type="checkbox" id="lightSwitch">
  <img src="lightbulb-off.png" alt="Lightbulb off">
</label>

<style>
#lightSwitch:checked + img {
  content: url('lightbulb-on.png');
}
</style>

效果：

动图

二、实现一个菜单切换

代码：

<nav>
  <label for="menuToggle">
    <input type="checkbox" id="menuToggle">
    <span>Menu</span>
  </label>

  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<style>
#menuToggle:checked + ul {
  display: block;
}

ul {
  display: none;
}
</style>

效果：

动图

三、实现一个模态框

代码：

<div id="modal">
  <label for="modalToggle">
    <input type="checkbox" id="modalToggle">
    <span>Modal</span>
  </label>

  <div class="modal-content">
    <p>This is a modal window.</p>
    <button type="button">Close</button>
  </div>
</div>

<style>
#modalToggle:checked + .modal-content {
  display: block;
}

.modal-content {
  display: none;
}
</style>