Изменить цвет флажка или переключателя с помощью CSS не работает - PullRequest
Новая
       30

Изменить цвет флажка или переключателя с помощью CSS не работает

0 голосов
/ 02 мая 2020

Я пытаюсь изменить цвет флажка? / переключатель с использованием CSS некоторого встроенного кода, созданного на нашем сайте, который создается нашей CMS (CMS является сторонним продуктом, интегрированным в наш сайт):

Просмотр FireFox Dev Tools the Элемент Check Box / Radio Button отображает это HTML

<div class="SFchk" id="SFusrmanlog" style="" onclick="SF.usr.man('log');" set="1"><div></div><div><strong>Sign In</strong><br>with your email and password.</div></div>

И это CSS: 

#SFctr .SFchk[set] > div:first-child {background-color: #f1694f; }

Цвет этого CSS красный, и мы хотим зеленый

Я попытался использовать следующий подход, чтобы изменить цвета других элементов и т.д. c, но это не сработало? Этот CSS был добавлен в наш пользовательский CSS, используемый для нашего сайта для управления цветами и элементами и т. Д. c, генерируемыми CMS. 

body #SFctr .SFchk[set] > div:first-child { background-color: #1F7665 !important; }

Элемент флажка / переключателя также имеет это CSS прикреплено к нему в FireFox Dev Tools: 

#SFctr .SFchk > div:first-child {
    float: left;
    margin: 2px 0 0;
    padding: 0;
    height: 12px;
    width: 12px;
    border-radius: 12px;
    border: 1px solid #777;
}
#SFctr .SFchk > div {
    margin: 0 0 0 25px;
    padding: 0;
    cursor: pointer;
}

Предложения? - Спасибо!

Ответы [ 2 ]

0 голосов
/ 11 мая 2020

Удалось разобраться с этим CSS и заставить элемент получить нужный мне цвет! 

#SFctr .SFchk[set]>div:first-child {background-color: #1f7665 !important;}

Удалено тело и обеспечено правильное форматирование, добавлено в глобальные CSS и bin go - вопрос отсортирован!

0 голосов
/ 02 мая 2020

Радиокнопка является встроенным элементом, поэтому вы не можете изменить стиль. Единственный известный мне способ - использовать JS. ( эта статья может помочь вам )

...