Как стилизовать radio кнопку в contact form wordpress?

Question

[ligisayan]

Всем привет! Есть необходимость стилизовать радио кнопки, как на картинке

и адаптировать их для формы contact form 7 в wordpress. С первой частью удалось справиться с помощью стилей - фидл, но со второй нет (ниже в фидле)

[radio gates-avto id:on class:radio default:1 "Да"]
[radio gates-avto id:on class:radio "Нет"]
<div class="list">
<label class="btn btn_on" for="on">Да</label><label class="btn btn_off" for="off">Нет</label>
</div>

т.к. много дополнительных оберток от формы плагина - уткнулся в тупик..

<p><span class="wpcf7-form-control-wrap gates-avto"><span class="wpcf7-form-control wpcf7-radio radio" id="on"><span class="wpcf7-list-item first last"><input type="radio" name="gates-avto" value="Да" checked="checked">&nbsp;<span class="wpcf7-list-item-label">Да</span></span>
  </span>
  </span>
  <br>
  <span class="wpcf7-form-control-wrap gates-avto"><span class="wpcf7-form-control wpcf7-radio radio" id="off"><span class="wpcf7-list-item first last"><input type="radio" name="gates-avto" value="Нет">&nbsp;<span class="wpcf7-list-item-label">Нет</span></span>
  </span>
  </span>
</p>
<div class="list">
  <label class="btn btn_on" for="on">Да</label>
  <label class="btn btn_off" for="off">Нет</label>
</div>

Answer 1

[BaxToNe]

В

[radio gates-avto id:on class:radio default:1 "Да"]

необходимо добавить тег use_label_element и ещё вам не нужно 2 раза писать теги, получится

[radio gates-avto use_label_element id:on class:radio default:1 "Да" "Нет"]

после чего, каждую радиокнопку обернет <label>, дальше можно стилизовать по вашему усмотрению.

Answer 2

[Денис Петровский]

так ж вроде стилизуются как обычно стилями ксс и не надо не чего оборачивать

Comments

[ligisayan]

Денис Петровский вы можете это продемонстрировать, лично я не знаю как (стилями css радиобатоны нельзя править, нат таких свойств) - фидл с заготовкой есть в описании