I'm have range inputs styled with

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;
}

I'd like to give them a "greyed out" style when they're disabled. Just tacking on a :disabled on to each of the existing selectors with a darkened background does not seem to be doing anything.

How can I style a disabled range input?

I'm have range inputs styled with

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;
}

I'd like to give them a "greyed out" style when they're disabled. Just tacking on a :disabled on to each of the existing selectors with a darkened background does not seem to be doing anything.

How can I style a disabled range input?

• javascript
• html
• css
• css-selectors

• This doesn't work? input[type="range"]:disabled { Probably needs the quotes. – Rob Moll Commented Jan 28, 2020 at 0:36
• see my Answer below, its what you looking for – X3R0 Commented Jan 28, 2020 at 0:46

1 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"