css не работает :has() в Mozilla

Question

Надо стилизовать radio, вставил изображение в label, используя :has() и псевдо, но в итоге увидел, что Firefox Mozilla(последняя версия) ее не поддерживает.

.mozilla label:has(#field_657b32a1017f4):before {
  content:url('https://cdn.iconscout.com/icon/free/png-48/free-small-diamond-geometric-blue-38006.png');
  display: block;
  margin: 0 auto;
  }

<div class="mozilla">
<label><input type="radio" id="field_657b32a1017f4" name="test-radio" value="Indistrial" checked="checked">test</label>
</div>

Можно не меняя код и не используя js обратиться к родителю на css кроссбраузерно?

Answer 1

если с доступом к чему то кроме css проблемки, можно попытаться сам инпут и кастомизировать, выбросив его стоковый appearance.

вам ведь его родитель только для этого и нужен, верно?

назвать это прям хорошей практикой конечно не могу, но...

его поддержка уж явно получше чем у :has

https://developer.mozilla.org/ru/docs/Web/CSS/appearance

.a{
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
width: 200px;
height: 200px;
border-radius: 0 100% 100% 100%;
border: 15px dashed green;
transition: all .5s ease-out;
display: list-item;
list-style: 'вжух' inside;
text-align: center;
}
.a::marker{
font-size: 50px;
color: lime;
}
.a:before{
display: block;
content: 'в FF 91 это работает и без префиксов';
font-size: 20px;
color: orange;
}
.a:checked{
border-radius: 100% 10% 100% 10%;
}
[type=checkbox]{
background: linear-gradient(to top, darkred, darkblue);}
[type=radio]{
background: linear-gradient(to top, gray, brown);}

<input class='a' type='checkbox'>
<input class='a' type='radio' name='x'>
<input class='a' type='radio' name='x'>
<input class='a' type='radio' name='x'>

Answer 2

Ваш вопрос: Можно не меняя код и не используя js обратиться к родителю на css кроссбраузерно?
Ответ: на текущий момент (19 декабря 2023 года) нельзя, хоть и сегодня Firefox обновится и там будет работать :has, это не означает, что все пользователи Firefox решат с обновлённым браузером заходить на ваш сайт. Можно только придумать ухищрения, которые я предлагаю ниже

Реализация на чистом CSS: элементы визуально расположены также, как у вас. в HTML они расположены не также, их очередность(визуальная) изменена с помощью сетки grid, свойства grid-template-areas

Картинка по умолчанию скрыта:

.mozilla__img {
  display: none;
}

при наличии элемента #field_657b32a1017f4 обратиться к соседу ниже (+), который должен являться .mozilla__img

#field_657b32a1017f4 + .mozilla__img {
  display: block;
}

.mozilla__label {
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-template-areas: "img img" 
                       "input input-text";
}

.mozilla__img {
  grid-area: img;
  display: none;
}

.mozilla__img::before {
  content :url('https://cdn.iconscout.com/icon/free/png-48/free-small-diamond-geometric-blue-38006.png');
  display: block;
}

.mozilla__input-text{
  grid-area: input-text;
}

.mozilla__input {
  grid-area: input
}

#field_657b32a1017f4 + .mozilla__img {
  display: block;
}

<div class="mozilla">
  <label class="mozilla__label">
    <span class="mozilla__input-text">test</span>
    <input class="mozilla__input" type="radio" id="field_657b32a1017f4" name="test-radio" value="Indistrial" checked="checked">
    <div class="mozilla__img">
    </div>
  </label>
</div>

БЛОГ НА HUSL

css не работает :has() в Mozilla

Ответы (2 шт):