使用CSS3自定义HTML5 range输入控件样式实现预期效果

效果对比 #

• 预期实现效果：
  
• 当前实际实现效果：
  

原有代码 #

input[type=range] {
    height: 39px;
    -webkit-appearance: none;
    margin: 10px 0;
    width: 100%;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 1px;
    cursor: pointer;
    animate: 0.2s;
    background: transparent;
    border-radius: 0px;
    border-bottom: 5px dotted #000000;
}

input[type=range]::-webkit-slider-thumb {
    box-shadow: 1px 1px 1px #ddd;
    height: 25px;
    width: 50px;
    border-radius: 50px;
    background: #FFFFFF;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -11.5px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: transparent;
}

input[type=range]::-moz-range-track {
    width: 100%;
    height: 10px;
    cursor: pointer;
    animate: 0.2s;
    box-shadow: 1px 1px 1px #000000;
    background: #3071A9;
    border-radius: 5px;
    border: 1px solid #000000;
}

input[type=range]::-moz-range-thumb {
    box-shadow: 1px 1px 1px #91FF69;
    border: 2px solid #FF6991;
    height: 30px;
    width: 15px;
    border-radius: 5px;
    background: #FFFFFF;
    cursor: pointer;
}

input[type=range]::-ms-track {
    width: 100%;
    height: 10px;
    cursor: pointer;
    animate: 0.2s;
    background: transparent;
    border-color: transparent;
    color: transparent;
}

input[type=range]::-ms-fill-lower {
    background: #3071A9;
    border: 1px solid #000000;
    border-radius: 10px;
    box-shadow: 1px 1px 1px #000000;
}

input[type=range]::-ms-fill-upper {
    background: #3071A9;
    border: 1px solid #000000;
    border-radius: 10px;
    box-shadow: 1px 1px 1px #000000;
}

input[type=range]::-ms-thumb {
    margin-top: 1px;
    box-shadow: 1px 1px 1px #91FF69;
    border: 2px solid #FF6991;
    height: 30px;
    width: 15px;
    border-radius: 5px;
    background: #FFFFFF;
    cursor: pointer;
}

input[type=range]:focus::-ms-fill-lower {
    background: #3071A9;
}

input[type=range]:focus::-ms-fill-upper {
    background: #3071A9;
}

修复方案 #

原有代码存在两个核心问题：

1. Firefox、IE内核的分支样式没有匹配预期效果，保留了默认的蓝色实体轨道、彩色边框滑块的配置，和点状黑轨道、白色圆角长滑块的需求完全不符。
2. Webkit内核下轨道高度、滑块的垂直偏移量计算错误，导致滑块和点状轨道对齐错位。另外代码中书写的animate是无效CSS属性，实现状态过渡需要使用transition属性。

替换为以下修正后的CSS即可实现目标效果：

input[type=range] {
    height: 39px;
    -webkit-appearance: none;
    margin: 10px 0;
    width: 100%;
    background: transparent;
}

input[type=range]:focus {
    outline: none;
}

/* Webkit内核（Chrome/Safari/新版Edge）样式 */
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    transition: 0.2s;
    background: transparent;
    border-bottom: 3px dotted #000000;
}

input[type=range]::-webkit-slider-thumb {
    box-shadow: 1px 1px 2px #ddd;
    height: 25px;
    width: 50px;
    border-radius: 25px;
    background: #FFFFFF;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -10px;
    border: 1px solid #eee;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: transparent;
}

/* Firefox内核样式 */
input[type=range]::-moz-range-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    transition: 0.2s;
    background: transparent;
    border-bottom: 3px dotted #000000;
}

input[type=range]::-moz-range-thumb {
    box-shadow: 1px 1px 2px #ddd;
    border: 1px solid #eee;
    height: 25px;
    width: 50px;
    border-radius: 25px;
    background: #FFFFFF;
    cursor: pointer;
}

/* IE内核样式 */
input[type=range]::-ms-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    transition: 0.2s;
    background: transparent;
    border-color: transparent;
    color: transparent;
    border-bottom: 3px dotted #000000;
}

input[type=range]::-ms-fill-lower {
    background: transparent;
    border: none;
}

input[type=range]::-ms-fill-upper {
    background: transparent;
    border: none;
}

input[type=range]::-ms-thumb {
    box-shadow: 1px 1px 2px #ddd;
    border: 1px solid #eee;
    height: 25px;
    width: 50px;
    border-radius: 25px;
    background: #FFFFFF;
    cursor: pointer;
    margin-top: 0;
}

input[type=range]:focus::-ms-fill-lower {
    background: transparent;
}

input[type=range]:focus::-ms-fill-upper {
    background: transparent;
}

内容的提问来源于stack exchange，提问作者Shibbir