Псевдокласс `:has()` действительно не поддерживается во всех браузерах, и это может усложнить задачу стилизации элементов на веб-странице. В вашем примере `label:has(input:checked)::before` вы пытаетесь добавить псевдоэлемент `::before` к `label`, если внутри него находится отмеченный элемент `input`.
Если вам нужно заменить эту конструкцию, есть несколько альтернативных подходов, которые можно использовать:
1. **JavaScript**: Используйте JavaScript для добавления нужного стиля к `label`, когда `input` внутри него отмечен. Например:
```javascript
document.querySelectorAll('input[type="checkbox"]').forEach(input => {
input.addEventListener('change', () => {
const label = input.closest('label');
if (label) {
label.classList.toggle('checked', input.checked);
}
});
});
```
Затем в CSS вы можете стилизовать `label` в зависимости от наличия класса `.checked`.
```css
label.checked::before {
content: "✓";
/* другие стили */
}
```
2. **Комбинация других псевдоклассов и селекторов**: Если вы хотите обойтись без JavaScript, вы можете использовать селекторы, но в этом случае стилизация будет ограничена. Например, вы можете скрыть элемент `input` и работать только с `label`:
```html
<label>
<input type="checkbox" />
<span class="custom-checkbox"></span> Текст метки
</label>
```
```css
input[type="checkbox"] {
display: none; /* скрываем стандартный чекбокс */
}
.custom-checkbox {
/* добавьте стили для кастомного чекбокса */
}
input[type="checkbox"]:checked + .custom-checkbox {
background-color: green; /* измените стиль кастомного чекбокса, когда input отмечен */
}
```
3. **Замените структуру HTML**: Если это возможно в вашем проекте, вы можете изменить структуру HTML таким образом, чтобы достичь нужной стилизации без использования `:has()`. Например, разместите компонент, который отвечает за визуальное отображение состояния, рядом с `input` и используйте другие селекторы.
В общем, если переход на JavaScript вас устраивает, это, вероятно, самый универсальный и гибкий вариант, который позволит вам избежать зависимостей от поддержки браузеров. Также вы можете подумать о модернизации пользовательского интерфейса с использованием современных фреймворков или библиотек, которые предоставляют потребные инструменты.