Я пытаюсь изменить так называемый неактивный цвет переключателя единственный в Framework7. Я знаю, что с помощью этой переменной CSS --f7-radio-inactive-color: <yourcolor>;
я могу установить неактивный цвет для всех моих переключателей.
Но я хотел бы изменить неактивный цвет только для одного (выбранного в данный момент) переключателя. Я мало что знаю о переменных css, поэтому я попробовал это
input:checked[name=color-radio]{
--f7-radio-inactive-color: rgba(255, 0, 0, 1);
}
но это не сработало.
Если вам нравится играть с моим минимальным примером, его можно найти здесь, на JSFiddle.
Я не верю, что переменные css осведомлены об области, поэтому их установка не на :root
не повлияет.
Но вы можете вручную установить цвет <i>
, и он будет отображаться правильно. Просто вам нужно сбросить все <i>
, прежде чем устанавливать их снова.
См.: https://jsfiddle.net/r0jkq2o7/2/
Спасибо, это достаточно хороший обходной путь для меня. Однако поведение не совсем такое же, потому что цвет меняется, когда радио активно, в то время как обычно радио остается в своем активном цветовом стиле, пока не будет выбрано другое радио. То есть в основном эффект можно было наблюдать только тогда, а сейчас он виден сразу. Но я должен быть в состоянии улучшить это до такой степени, что поведение будет таким же.