设置禁用范围输入的样式

Question

我的输入范围为

input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 3px;
    background: #2C65FF;
    border-radius: 2px;
}

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

input[type=range]::-moz-range-track {
    width: 100%;
    height: 3px;
    background: #2C65FF;
    border-radius: 2px;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 10px;
    width: 10px;
    background: white;
    margin-top: -14px;
}

input[type=range]::-moz-range-thumb {
    height: 10px;
    width: 10px;
    background: white;
}

我想在他们被禁用时给他们一种“灰色”风格。仅将:disabled附加到背景较暗的每个现有选择器上似乎都无济于事。

如何设置禁用范围输入的样式？

Answer 1

您需要添加其他这样的CSS道具：

input[type=range]:disabled {
    /* Disabled Element */
}

input[type=range]:disabled::-webkit-slider-runnable-track {
    /* Disabled slider-runnable-track */
}

input[type=range]:disabled::-moz-range-track {
      /* Disabled slider-range-track */
}

input[type=range]:disabled::-webkit-slider-thumb {
    /* Disabled slider-thumb */
}

input[type=range]:disabled::-moz-range-thumb {
    /* Disabled slider-thumb */
}

示例：Link

notice

“：disabled”后接“ ::-propertyname”