Приветствую, друзья! Мне нужно изменить внешний вид чекбокса. Решил через LABEL, тем более способ давно известен. Но возникла проблема - изменять html-код я не могу, а span::before и span::after уже плотно используются.
Решил добавить псевдоэлемент к LABEL и от него скакать. Ведь по идее input, span и label::after находятся на одном уровне вложенности. Даже браузеры в DevTools показывают всё именно так. Да и если я к LABEL применю относительное позиционирование, а к label::after - абсолютное, то он будет позиционироваться именно относительно LABEL, что как бы намекает, что label::after находится внутри LABEL.
Но в итоге моя идея не работает. Подскажите, почему label::after не хочет менять фон на зелёный? Ну и может какую идею подкинете, как изменить чекбокс? Конечно без JS, с ним-то понятно)
ps Вообще походу все браузеры трактуют псевдоэлементы одинаково относительно друг-друга (других браузеров), но по разному относительно нахождения псевдоэлементов в DOM. Используешь позиционирование? Ок, label::after находится внутри label. Используешь соседние селекторы? Э, не, label::after тута нету. А вот span::before и span::after находятся как раз на одном уровне вместе со span, а никак не внутри него.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
label::after {
content:'111';
}
input:checked + span + label::after {background:red}
</style>
</head>
<body>
<label>
<input type="checkbox">
<span>Я принимаю условия пользовательского соглашения</span>
</label>
</body>
</html>