主页 / 问题 / 671502
Accepted
Eugen Eray
Asked:2020-05-27 18:37:37 +0000 UTC2020-05-27 18:37:37 +0000 UTC

样式输入类型=滑块前的范围

  • 772

你好！滑块有这样的样式：

input[type=range] {-webkit-appearance: none; margin: 5.8px 0; background-color: transparent !important;}

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

input[type=range]::-webkit-slider-runnable-track {cursor: pointer; box-shadow: 2.4px 2.4px 6.2px rgba(7, 7, 163, 0.72), 0px 0px 2.4px rgba(8, 8, 187, 0.72); background: #ac62ff; border-radius: 21.6px; border: 1px solid rgba(163, 0, 255, 0.79);}

input[type=range]::-webkit-slider-thumb {box-shadow: 2.4px 2.4px 9.5px rgba(4, 16, 14, 0.78), 0px 0px 2.4px rgba(9, 36, 32, 0.78); border: 1.8px solid rgba(0, 0, 6, 0.77); border-radius: 28px; background: #ffff29; cursor: pointer; -webkit-appearance: none; margin-top: -7.8px;}

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

input[type=range]::-moz-range-track {width: 100%; cursor: pointer; box-shadow: 2.4px 2.4px 6.2px rgba(7, 7, 163, 0.72), 0px 0px 2.4px rgba(8, 8, 187, 0.72); background: #ac62ff; border-radius: 21.6px; border: 1px solid rgba(163, 0, 255, 0.79);}

input[type=range]::-moz-range-thumb {box-shadow: 2.4px 2.4px 9.5px rgba(4, 16, 14, 0.78), 0px 0px 2.4px rgba(9, 36, 32, 0.78); border: 1.8px solid rgba(0, 0, 6, 0.77); border-radius: 28px; background: #ffff29; cursor: pointer;}

input[type=range]::-ms-track {width: 100%; cursor: pointer; background: transparent; border-color: transparent; color: transparent;}

input[type=range]::-ms-fill-lower {background: #a758ff; border: 1px solid rgba(163, 0, 255, 0.79); border-radius: 43.2px; box-shadow: 2.4px 2.4px 6.2px rgba(7, 7, 163, 0.72), 0px 0px 2.4px rgba(8, 8, 187, 0.72);}

input[type=range]::-ms-fill-upper {background: #ac62ff; border: 1px solid rgba(163, 0, 255, 0.79); border-radius: 43.2px; box-shadow: 2.4px 2.4px 6.2px rgba(7, 7, 163, 0.72), 0px 0px 2.4px rgba(8, 8, 187, 0.72);}

input[type=range]::-ms-thumb {box-shadow: 2.4px 2.4px 9.5px rgba(4, 16, 14, 0.78), 0px 0px 2.4px rgba(9, 36, 32, 0.78); border: 1.8px solid rgba(0, 0, 6, 0.77); border-radius: 28px; background: #ffff29; cursor: pointer;}

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

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

/* Track */
input[type=range]::-webkit-slider-runnable-track {height: 6.4px;}
input[type=range]::-moz-range-track {height: 6.4px;}
input[type=range]::-ms-track {height: 6.4px;}

/* Thumb */
input[type=range]::-webkit-slider-thumb {height: 20px; width: 8px;}
input[type=range]::-moz-range-thumb {height: 20px; width: 8px;}
input[type=range]::-ms-thumb {height: 20px; width: 8px;
<input type="range" value="0" min="0" max="100" step="1"/>

我的任务是更改拨动开关前面滑块的颜色。怎么做？

如果不清楚，我可以举个例子。

html

2 个回答

  1. Best Answer

    以下是滑块前后颜色不同的样式示例：

        input[type='range'] {
        overflow: hidden;
        width: 80px;
        -webkit-appearance: none;
        background-color: #9a905d;
    }
    
    input[type='range']::-webkit-slider-runnable-track {
        height: 10px;
        -webkit-appearance: none;
        color: #13bba4;
        margin-top: -1px;
    }
    
    input[type='range']::-webkit-slider-thumb {
        width: 10px;
        -webkit-appearance: none;
        height: 10px;
        cursor: ew-resize;
        background: #434343;
        box-shadow: -80px 0 0 80px #43e5f7;
    }
    
    input[type="range"]::-moz-range-progress {
        background-color: #43e5f7; 
    }
    input[type="range"]::-moz-range-track {  
        background-color: #9a905d;
    }
    input[type="range"]::-ms-fill-lower {
        background-color: #43e5f7; 
    }
    input[type="range"]::-ms-fill-upper {  
        background-color: #9a905d;
    }
    <input type="range" value="0" min="0" max="100" step="1"/>

    • 13

  2. 据我了解，您需要没有溢出：隐藏；在输入。这是一个工作示例：

        .range_container{
        position: relative;
        width: 80px; /*input range width*/
        height: 10px; /*input range height*/
        overflow: hidden;
    }
    
    input[type='range'] {
        position: absolute;
        width: 80px;
        height: 9px;
        -webkit-appearance: none;
        background-color: #9a905d;
        top: -2px;
        left: -2px;
    }
    
    input[type='range']::-webkit-slider-runnable-track {
        height: 10px;
        -webkit-appearance: none;
        color: #13bba4;
        margin-top: 1px;
    }
    
    input[type='range']::-webkit-slider-thumb {
        width: 10px;
        -webkit-appearance: none;
        height: 10px;
        cursor: ew-resize;
        background: #434343;
        box-shadow: -80px 0 0 80px #43e5f7;
    }
    
    input[type="range"]::-moz-range-progress {
        background-color: #43e5f7; 
    }
    input[type="range"]::-moz-range-track {  
        background-color: #9a905d;
    }
    input[type="range"]::-ms-fill-lower {
        background-color: #43e5f7; 
    }
    input[type="range"]::-ms-fill-upper {  
        background-color: #9a905d;
    }
    <div class="range_container">
    <input type="range" />
</div>

    • 7

相关问题