. inline-block
. 配合 <option> 使用；其子元素只能是 <option> block
. name-value比较特别。name写在 <select>；value 写在 <option>，也可以省略 value，系统会把 <option> 的值自动作为value
. <select>的宽度决定了<option>的宽度
. <option> 很难动态增加或减少
. 使用 <optgroup> 分组；分组标题不能选择，仅仅作为提示
. 如果需要动态增加或减少选项，需要从头定制。如利用无序列表实现选项；更多设计技巧，请访问 making
a better one
. 更多信息，请访问 MDN -
<select>
| 类别 | 说明 |
|---|---|
| size | 显示几个option；通常不指定，以免影响页面布局 |
| selected | 默认选中当前<option> |
| multiple | 多选；使用较少 |
| 类别 | 说明 |
|---|---|
| change | 选择改变时 |
<select name="school" id="school-single">
<option value="guilin">guilin</option>
<option value="xiamen">xiamen</option>
<option value="foshan">foshan</option>
<option value="haikou">haikou</option>
<option value="dongguan" selected>dongguan</option>
</select>
let single = document.querySelector("#school-single")
single.addEventListener('change', function () {
console.log(this.value);
})
<select name="school" id="school-mul">
<optgroup label="college">
<option value="guilin">guilin</option>
<option value="xiamen">xiamen</option>
<option value="foshan">foshan</option>
<option value="haikou">haikou</option>
<option value="dongguan" selected>dongguan</option>
</optgroup>
<optgroup label="unit">
<option value="gl">gl</option>
<option value="sh">sh</option>
</optgroup>
</select>
let mul = document.querySelector("#school-mul")
mul.addEventListener('change', function () {
console.log(this.value);
})
. 可以设置 <select> 和 <option> 的字体颜色、大小、选项选中，其它可以设置的属性比较少
. 很少直接使用。都是指定 MDN
- appearance
以便重新设计 - notoriously difficult to style productively with CSS
它是一个替换元素（replaced element），其内部结构是由浏览器控制的，不允许通过这些伪元素进行自定义
默认样式
定制样式
去除边框、轮廓、背景
字体和颜色继承父级
默认加重；各选项不加重
select {
outline: none;
border: none;
font: inherit;
color: inherit;
background-color: transparent;
font-weight: 600;
padding: 0 10px;
}
select option {
font-weight: normal;
}
隐去默认样式
使用边框border
使用背景图片代替小三角，不能使用伪元素
增加hover和focus设计
.select {
appearance: none;
display: block;
width: 100%;
border: 1px solid #aaa;
background-color: #fff;
border-radius: 6px;
padding: 4px 10px;
background-image: url(../imgs/down.png);
background-repeat: no-repeat;
background-position: right 10px top 10px;
}
.select:hover {
border-color: #888;
}
.select:focus {
border-color: var(--main-color-blue);
box-shadow: 0 0 4px rgba(0, 0, 0, .2);
}
容器元素：提供小箭头的定位依据
标记元素：模拟小箭头，定位 在右侧
遮罩元素：接收选中的数据，增加更多控制；原有<select>被覆盖
值和显示的数据分别设计；只显示长的备选信息中的关键信息
增加事件，动态修改选择内容
<div class="custom-wrap">
<select name="school" id="school-custom">
<option value="桂林">广西壮族自治区桂林市</option>
<option value="厦门">福建省厦门市</option>
<option value="佛山">广东省佛山市</option>
<option value="海口" selected>海南省海口市</option>
</select>
<div class="mask"></div>
<span class="iconfont icon-unfoldmore"></span>
</div>
增加一个容器包裹表单元素 <select>；相对定位
增加一个遮罩元素 mask，显示选中的值/城市名；绝对定位到容器前部；取消事件响应
增加一个标记元素，显示上下箭头，提示用户可以操作；绝对定位到容器后部；取消事件响应
设置 <select> 字体颜色透明/不显示
设置 <option> 颜色为黑色
增加 JavaScript；一开始获取 <select> 的值给遮罩元素 mask
为 <select> 增加 change 事件，每次改变时修改遮罩 mask 的文本
增加其它设计，如 :hover
完全抛弃表单元素，从0开始设计
无法响应表单事件
