<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>js+css3支持多选下拉城市菜单选择代码</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--地球图标-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--核心样式-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>来源:<a href="https://www.lanrenzhijia.com/" target="_blank">懒人</a></p>
</div>
</body>
</html>