Почему невозможно изменить цвет флага независимо от модификаций кода?

, несмотря на попытки настроить цвет фона флажков через CSS, многие пользователи сталкиваются с отсутствием видимых изменений. Этот вопрос был распространен в Firefox 29 и позже.

объяснение

невозможность изменить цвет флага проистекает из преднамеренного упущения этой функции в HTML. Флакторы и радиопроизводительные кнопки рассматриваются как «нативные» элементы формы, что означает, что их внешний вид регулируется браузером, а не правилами CSS. Браузеры определяют приоритеты в последовательности в пользовательском интерфейсе, и, таким образом, они обеспечивают соблюдение визуальных свойств по умолчанию для этих элементов.

Solution

, чтобы преодолеть это ограничение и настроить появление флажки, рассмотрим использование следующих CSS. Свойство:

accent-color

. Установив это свойство, вы получаете контроль над цветом акцента, применяемом к флажке, который охватывает галочку и любой сопроводительный фон. Вот пример:

#cb1 {
  accent-color: #9b59b6; /* Change the color of the check mark within checkbox #cb1 to blue */
}

Demonage

см. Демо, чтобы увидеть успешную модификацию цветов флага с использованием свойства акцентного цвета:

#cb1 {
  accent-color: #9b59b6;
}

#cb2 {
  accent-color: #34495e;
}

#cb3 {
  accent-color: #e74c3c;
}

]