为禁用的范围输入设置样式

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

通知

":disabled" 后跟 "::-propertyname"