Поясните по поводу псевдоэлементов и соседних селекторов
Приветствую, друзья! Мне нужно изменить внешний вид чекбокса. Решил через 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>
|
Цитата:
Цитата:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
input {
position:relative;
}
input::after {
content:'111';
position:absolute;
top: 100%;
}
input:checked::after {background-color:green; color:white}
</style>
</head>
<body>
<label>
<input type="checkbox">
<span>Я принимаю условия пользовательского соглашения</span>
</label>
</body>
</html>
|
Хотя извиняюсь, сразу не проверил.
В Хроме это работает, в файрфоксе - нет Идей нет. :has - тоже не работает в файрфоксе и прочих старых браузерах. |
<label> <input type="checkbox"> <span>Я принимаю условия пользовательского соглашения</span> </label>
label input[type="checkbox"] {
opacity: 0;
pointer-events: none;
position: absolute;
}
label input[type="checkbox"] + span::before {
background-position: center center;
background-repeat: no-repeat;
background-size: auto 20px;
border: 1px solid #000000;
border-radius: 4px;
content: '';
cursor: pointer;
display: inline-block;
height: 24px;
margin-right: 8px;
vertical-align: middle;
width: 24px;
}
label input[type="checkbox"]:checked + span::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='100' height='100' viewBox='0 0 24 24'%3E%3Cpath d='M 20.292969 5.2929688 L 9 16.585938 L 4.7070312 12.292969 L 3.2929688 13.707031 L 9 19.414062 L 21.707031 6.7070312 L 20.292969 5.2929688 z'%3E%3C/path%3E%3C/svg%3E");
}
label input[type="checkbox"]:disabled + span::before {
cursor: default;
opacity: 0.5;
}
label input[type="checkbox"]:focus + span::before {
outline: 1px solid blue;
}
|
Цитата:
Цитата:
|
| Часовой пояс GMT +3, время: 11:53. |