@input

range
range样式
[] input-range
.To add tick marks to a range control, include the list attribute, giving it the id of a <datalist> element which defines a series of tick marks on the control. Each point is represented using an <option> element with its value set to the range's value at which a mark should be drawn.
.You can label tick marks by giving the <option> elements label attributes. However, the label content will not be displayed by default. You can use CSS to show the labels and to position them correctly.
.min、max、step、list
.datalist：value、label
水平
垂直
[] 自定义 range - 利用 appearance
. 默认高度是16px
. 直接修改滑块背景的样式
. 滑块的样式需要使用浏览器前缀
.range-bar {
    appearance: none;
    background-image: linear-gradient(74deg, #16a085, #1abc9c);
    border-radius: 16px;
    border: 2px solid #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
}

.range-bar::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    background-color: #f1c40f;
    border-radius: 50%;
    transition: 0.5s;
}

.range-bar:active::-webkit-slider-thumb {
    box-shadow: 0 0 10px 4px #f39c12;
}
[] 自定义 fieldset
. 可以单独设置每一条边；还可以使用定位任意放置 legend
information
teamwork
certificates 
.fieldset fieldset {
  position: relative;
  border: 1px solid var(--main-color-dark);
  border-top: 10px solid var(--main-color-blue);
  margin-bottom: 2rem;
}
.fieldset legend {
  font-size: 1.2rem;
  margin: 0 auto;
  padding: 0 1rem;
  text-transform: capitalize;
}
.fieldset fieldset:nth-child(2) legend {
  position: absolute;
  right: 40px;
  top: -20px;
  background-color: #fff;
}
.fieldset fieldset:nth-child(3) legend {
  position: absolute;
  left: 40px;
  bottom: -20px;
  background-color: #fff;
}
date
. 简便起见，以下各示例略去<label>
. 选择年月日
<input type="date" name="date" id="date-ipt">
month
. 选择年月
<input type="month" name="mon" id="mon-ipt">
time
. 系统时间的一些设置会反映出来
<input type="time" name="time" id="time-ipt">
week
. 年度第几周
<input type="week" name="week" id="week-ipt">
number
. min：最小值
. max：最大值
. value：当前值
. step：步进，默认是1
. 获取焦点后可以使用键盘上下方向键
5 
<input type="number" name="num" id="num-ipt" min="1" max="10" value="5">
color
. value值为16进制完整写法，如#FF4400，不可以简写为#F40，
#ff4400 
<input type="color" name="color" id="color-ipt" value="#ff4400">
验证型
. 配合pattern和JS完善验证需求
. email
. tel
. url
综合练习
[] 音乐播放器
[] 摇色子
. 色子持续摇动；单击色子，随机停下；再次单击，继续开始摇动
知识点
. 帧动画：步进、动画状态控制
. 表单元素 checkbox
. 伪类选择器 :checked
. 相邻兄弟选择器 +
方案1：定位后分段移动left
<div class="dice-pos">
    <input type="checkbox" id="dice-pos" hidden>
    <label for="dice-pos"></label>
</div>
.dice-pos {
    position: relative;
    width: 125px;
    height: 125px;
    margin: 1rem auto;
    border-radius: 20px;
    overflow: hidden;
}

.dice-pos label {
    position: absolute;
    left: 0;
    top: 0;
    width: 600%;//
    height: 100%;
    background-image: url(../imgs/dice.jpg);
    animation: roll0 0.6s steps(6) infinite;
}

.dice-pos input:checked+label {
    animation-play-state: paused;
}
方案2：分段移动background-position
<div class="dice-box">
    <input type="checkbox" id="dice" hidden>
    <label for="dice"></label>
</div>
.dice-box {
    width: 125px;
    height: 125px;
    border-radius: 20px;
    margin: 1rem auto;
    overflow: hidden;
}

.dice-box label {
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(../imgs/dice.jpg);
    background-position: -20%;
    animation: roll1 0.6s steps(6, start) infinite;
    cursor: pointer;
}

.dice-box input:checked+label {
    animation-play-state: paused;
}

@keyframes roll1 {
    to {
        background-position: 100%;
    }
}