CSS 如何在下拉菜单中创建复选框

在本文中，我们将介绍如何使用 CSS 在下拉菜单中创建复选框。

阅读更多：CSS 教程

1. 使用标签和伪类

使用HTML中的标签和CSS中的伪类可以实现在下拉菜单中创建复选框的效果。

例子：

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* 下拉菜单样式 */
      .dropdown {
        position: relative;
        display: inline-block;
      }

      /* 下拉菜单内容隐藏 */
      .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        padding: 12px 16px;
      }

      /* 将复选框显示为下拉菜单内容 */
      .dropdown-content input[type="checkbox"] {
        display: block;
      }

      /* 鼠标悬停在下拉菜单上时显示下拉菜单内容 */
      .dropdown:hover .dropdown-content {
        display: block;
      }
    </style>
  </head>
  <body>
    <h2>下拉菜单中的复选框</h2>

    <div class="dropdown">
      <span>选择</span>
      <div class="dropdown-content">
        <input type="checkbox" value="option1" />选项1<br />
        <input type="checkbox" value="option2" />选项2<br />
        <input type="checkbox" value="option3" />选项3
      </div>
    </div>
  </body>
</html>

在上面的例子中，我们创建了一个包含下拉菜单的div元素。下拉菜单的内容部分是一个包含复选框的div元素。通过应用适当的CSS样式，我们将复选框显示在下拉菜单中。当鼠标悬停在下拉菜单上时，下拉菜单的内容将显示出来。

2. 使用CSS框架

如果你使用的是CSS框架，比如Bootstrap，你可以直接使用框架提供的组件来创建下拉菜单和复选框。

例子：

<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
      integrity="sha384-pzjw8+uaXzEzy+JXO40E1xkem7xRto7CG5kRWfF7X0y4l3+
      C4pAD8+jSO6AaDB3Ei"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <h2>下拉菜单中的复选框</h2>

    <div class="btn-group">
      <button
        type="button"
        class="btn btn-secondary dropdown-toggle"
        data-toggle="dropdown"
        aria-haspopup="true"
        aria-expanded="false"
      >
        选择
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item">
          <input type="checkbox" value="" />选项1
        </a>
        <a class="dropdown-item">
          <input type="checkbox" value="" />选项2
        </a>
        <a class="dropdown-item">
          <input type="checkbox" value="" />选项3
        </a>
      </div>
    </div>

    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-
      DfXdz2htPH0lsSSs5nCTpuj/zyklEh+SFDuVq0d4zOan7vAlh5Bu7czWTdV
      Q5n2n"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
      integrity="sha384-
      wG0/wK3xLhBk4fXY81vFx8XmRGi5ZN+I9AfngzuCbvAKKtfpqZBwR7dkB
      ETjOOq"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

在上面的例子中，我们使用了Bootstrap框架提供的下拉菜单和复选框组件。通过添加适当的CSS类和JavaScript代码，我们实现了在下拉菜单中创建复选框的效果。