下拉列表

<select>

Introduction

属性
item desc
selected 默认选中当前 <option>
size 显示几个 option;通常不指定,以免影响页面布局
multiple 多选;使用较少
<select name="school" id="school" class="school">
  <option value="">please select your school...</option>
  <option value="guilin">guilin</option>
  <option value="xiamen">xiamen</option>
  <option value="foshan">foshan</option>
  <option value="haikou" selected>haikou</option>
  <option value="dongguan">dongguan</option>
</select>

CSS

Initialization

[] 初始化样式
select {
  appearance: none;
  display: block;
  width: 100%;
  outline: none;
  border: none;
  font: inherit;
  color: inherit;
  background-color: transparent;
  padding: 0 10px;
}
[] 定制样式1 - 不增加元素
[] 定制样式2 - 额外增加1个容器、1个遮罩和1个标记
[] 定制样式3 - 下拉列表 全新定制

JavaScript

[] 主题切换 Theme

Summary & Homework

Summary

Homework

. 使用 <select> 元素完善个人网站的留言板或信息采集表的设计