input range标签美化

• 取消默认样式：

    input[type=range] {
        -webkit-appearance: none;
    }
  

• 聚焦边框取消：

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

• 滑道设置：
  Chrome、Firefoxi或者IE浏览器通过不同伪类来设置

    /*chrome、safari浏览器*/
    input[type='range']::-webkit-slider-runnable-track{
        background-color: #eee;
    }
    /*firefox浏览器*/
    input[type='range']::-moz-range-track{
        background-color: #eee;
    }
    /*IE浏览器*/
    input[type="range"]::-ms-track{       
      color:transparent;/*去除轨道内竖线*/
      border-color: transparent;/*去除原有边框*/
      background-color: #eee;
    }
  

• 滑块设置：

    /*chrome，safar等浏览器设置*/
    input[type='range']::-webkit-slider-thumb {
        -webkit-appearance: none;
        border: 3px solid #fff;
        height: 7px;
        width: 7px;
        border-radius: 8px;
        background: red;
        cursor: pointer;
    }
    /*firefox 浏览器设置*/
    input[type='range']::-moz-range-thumb {
        border: 3px solid #fff;
        height: 7px;
        width: 7px;
        border-radius: 8px;
        background: red;
        cursor: pointer;
    }
    /*IE浏览器设置*/
    input[type='range']::-ms-thumb {
        border: 3px solid #fff;
        height: 7px;
        width: 7px;
        border-radius: 8px;
        background: red;
        cursor: pointer;
    }
  

• 滑道填充部分和未填充部分设置：
  基于webkit内核需要配合JS实现。

    /*firefox浏览器已填充部分*/
    input[type=range]::-moz-range-progress {
        background: linear-gradient(to right, red, white 100%, white);
        height: 20px;    
        border-radius: 10px;
    }
    /*IE浏览器*/
    /*滑道未填充的部分*/
    input[type=range]::-ms-fill-upper {
      height: 20px;
      border-radius: 10px;
      background: #ffffff;
    }
    /*滑道已填充的部分*/
    input[type=range]::-ms-fill-lower {
      height: 20px;
      border-radius: 10px;
      background: linear-gradient(to right, red, white 100%, white);
    }