基于css3制作圆形下拉框，点击滑动展开收缩城市菜单，支持多选/勾选城市效果。这是一款实用的下拉菜单选择代码。

使用方法

1、head引入css文件

<!--地球图标-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!--核心样式-->
<link rel="stylesheet" href="css/style.css">

2、body引入HTML代码

<div class="app-canvas">
  <div class="menubox" tabindex="0">
    <div class="menubox__label">
      <i class="material-icons">language</i>
      <span class="menubox__label-text">城市</span>
    </div>
    <div class="menubox__contents">
      <ul class="menubox__options">
        <li class="menubox__option">
          <label class="menubox__option-toggle">
            <input type="checkbox">
            <span class="menubox__option-label">上海</span>
            <span class="menubox__option-toggle-check"></span>
          </label>
        </li>
        <li class="menubox__option">
          <label class="menubox__option-toggle">
            <input type="checkbox">
            <span class="menubox__option-label">北京</span>
            <span class="menubox__option-toggle-check"></span>
          </label>
        </li>
        <li class="menubox__option">
          <label class="menubox__option-toggle">
            <input type="checkbox">
            <span class="menubox__option-label">广州</span>
            <span class="menubox__option-toggle-check"></span>
          </label>
        </li>
        <li class="menubox__option">
          <label class="menubox__option-toggle">
            <input type="checkbox">
            <span class="menubox__option-label">武汉</span>
            <span class="menubox__option-toggle-check"></span>
          </label>
        </li>
        <li class="menubox__option">
          <label class="menubox__option-toggle">
            <input type="checkbox">
            <span class="menubox__option-label">湖南</span>
            <span class="menubox__option-toggle-check"></span>
          </label>
        </li>
        <li class="menubox__option">
          <label class="menubox__option-toggle">
            <input type="checkbox">
            <span class="menubox__option-label">济南</span>
            <span class="menubox__option-toggle-check"></span>
          </label>
        </li>
        <li class="menubox__option">
          <label class="menubox__option-toggle">
            <input type="checkbox">
            <span class="menubox__option-label">重庆</span>
            <span class="menubox__option-toggle-check"></span>
          </label>
        </li>
      </ul>
    </div>
  </div>
</div>

<script src="js/index.js"></script>

资源出处：https://www.moyublog.com/codes/47.html