设置禁用范围输入的样式

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

you need to add on the other css props like this:

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 */
}

Example: Link

notice

":disabled" followed by "::-propertyname"