Стилизация отключенного ввода диапазона - PullRequest
Новая
       6

Стилизация отключенного ввода диапазона

1 голос
/ 28 января 2020

У меня есть входы диапазона, стилизованные под 

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 к каждому из существующих селекторов с затемненным фоном ничего не делает.

Как я могу стилизовать ввод с отключенным диапазоном?

1 Ответ

0 голосов
/ 28 января 2020

Вы должны добавить на другие 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 */
}

Пример: Ссылка

уведомление

": отключено", за которым следует ":: - имя свойства"

...