css3美化浏览器原生rang组件

input[type="range"] {
        /*-webkit-box-shadow: 0 1px 0 0px #424242, 0 1px 0 #060607 inset, 0px 2px 10px 0px black inset, 1px 0px 2px rgba(0, 0, 0, 0.4) inset, 0 0px 1px rgba(0, 0, 0, 0.6) inset;*/
        /*margin-top: 2px;*/
        background-color: rgba(76, 175, 80, 0.86);
        border-radius: 30px;
        width: 4rem;
        -webkit-appearance: none;
        height:0.3rem;
        border: none;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    cursor: default;
    top: 0.2rem;
    height: 0.5rem;
    width: 0.5rem;
    transform: translateY(0rem);
    background: none repeat scroll 0 0 #4CAF50;
    border-radius: 100%;
    border: none;
    /*-webkit-box-shadow: 0 -1px 1px black inset;*/
}

<input class="rangeInput" type="range" min="1" max="10" step="1" value="1" />

图片效果：