下拉列表 <select>

Introduction

行内盒 inline-block
配合 <option> 使用；其子元素只能是 <option> block
name-value 比较特别。name写在 <select>；value 写在 <option>，也可以省略 value，系统会把 <option> 的值自动作为 value
<select> 的宽度决定了 <option> 的宽度
<option> 很难动态增加或减少
使用 <optgroup> 分组；分组标题不能选择，仅仅作为提示
如果需要动态增加或减少选项，需要从头定制。如利用无序列表实现选项；更多信息，请访问MDN - <select>、making a better one

属性
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

先初始化样式再定制样式
去除边框、轮廓、背景
字体和颜色继承父级
下拉菜单的样式由浏览器原生控件控制，无法通过CSS完全自定义；具体要看浏览器支持
<select> 可以设置字体颜色、大小、选项选中，其它可以设置的属性比较少
<option> 不支持 :hover；通过自定义数据data- 可以单独设置样式
通常要隐去原有样式并重新设计
更多信息，请访问 MDN - appearance 以便重新设计 - notoriously difficult to style productively with CSS

[] 初始化样式

select {
  appearance: none;
  display: block;
  width: 100%;
  outline: none;
  border: none;
  font: inherit;
  color: inherit;
  background-color: transparent;
  padding: 0 10px;
}

[] 定制样式1 - 不增加元素

隐去默认样式
使用边框 border
使用背景图片代替小三角，不能使用伪元素
增加 hover 和 focus设计

.school {
  border: 1px solid #eee;
  padding: 4px 10px;
  background-image: url(../imgs/down.png);
  background-repeat: no-repeat;
  background-position: right 10px top 10px;
}

.school:hover {
  border-color: #f40;
}

JavaScript

获取元素
响应事件

事件
item	desc
change	选择改变时

const school = document.getElementById("school")
school.addEventListener('change',  ()=> {
    console.log(school.value);
    // ...
})

[] 定制样式2 - 额外增加1个容器、1个遮罩和1个标记

增加一个容器元素 wrap 包裹表单元素 <select>；wrap 为相对定位，为 mask 和 marker 提供定位依据
增加一个遮罩元素 mask，用于显示选中的值；mask 为绝对定位，覆盖 <select>；取消事件响应
增加一个标记元素 marker，显示上下箭头，用于提示用户操作；marker 为绝对定位到容器右部；取消事件响应；可以是图片或字体图标
设置 <select> 字体颜色透明；会影响到 <option>，所以需要设置 <option> 颜色为黑色
增加 JavaScript；一开始获取 <select> 的值给遮罩元素 mask
为 <select> 增加 change 事件，每次改变时修改遮罩元素 mask 的内容
其它细节设计，如高度、:hover、:focus等
更多设计细节，请参考天猫登录页面、淘宝高仿

[] 定制样式3 - 下拉列表全新定制

完全抛弃表单元素，从0开始设计
无法响应表单事件

[] 主题切换 Theme

使用自定义数据 data- 设置对应的背景色，用于提示用户
单击时，选择颜色，修改页面背景
其它设计：使用本地保存 localStorage保存主题色

<option value="#f40" data-bg="#f40">红色</option>

option[data-bg="#f40"] {
  background-color: #f40;
  color: #fff;
}

const body = document.body
const theme = document.getElementById('theme')
theme.addEventListener('change', () => {
  body.style.background = theme.value
})

下拉列表

Introduction

CSS

Initialization

JavaScript

Summary & Homework

Summary

Homework