Как добавить css радиокнопке Contact form 7 wordpress? Почему не работают стили для checked?

Question

[legatobrown]

<div class="pereplet_radio_block">
<span class="wpcf7-form-control-wrap radio-372">
<span class="wpcf7-form-control wpcf7-radio pereplet_check1">
<span class="wpcf7-list-item first">
<label>
<span class="wpcf7-list-item-label">Твердый</span>
<input type="radio" name="radio-372" value="Твердый" checked="checked">
</label>
</span>
<span class="wpcf7-list-item last">
<label>
<span class="wpcf7-list-item-label">Мягкий</span>
<input type="radio" name="radio-372" value="Мягкий">
</label>
</span>
</span>
</span>
</div>

/* стили для радиокнопки, находящейся в состоянии checked */

.pereplet_check1 .last label input:checked+span::before {
    border-color: #0b76ef;
    background-color: #0b76ef;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.pereplet_check1 .first label input:checked+span::before {
    border-color: #0b76ef;
    background-color: #0b76ef;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

Answer 1

[Softlink]

Надо поменять местами input и span в разметке. Селектор + находит непосредственно следующий элемент.

Comments

[legatobrown]

В contact form 7 в wordpress не могу менять их местами.

[Softlink]

legatobrown, а положить label рядом со инпутом, а не вкладывать друг в друга сможете? В противном случае останется использовать только js.

[Антон Литвиненко]

забавно, у меня спан wpcf7-list-item-label идет после инпута и я оформляю через него