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

370

26 ноября 2016, 18:39

В продолжение вопроса по стилизации радио кнопок с которым удалось успешно справиться, теперь есть необходимость адаптировать их для формы 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>

Получаю следующее - Фидл

/* Базовые стили */ 
 
*, 
*:before, 
*:after { 
  box-sizing: border-box; 
} 
body { 
  background: #964939; 
} 
/* Cкрываем input[type="radio"] */ 
 
.radio { 
  display: none; 
} 
/* Стили для кнопок */ 
 
.btn { 
  display: inline-block; 
  vertical-align: middle; 
  width: 80px; 
  height: 34px; 
  text-align: center; 
  padding: .5rem 1rem; 
  color: #fff; 
  font-family: sans-serif; 
  cursor: pointer; 
  position: relative; 
} 
/* dotted подчеркивание */ 
 
.btn:after { 
  content: '....'; 
  position: absolute; 
  bottom: -3px; 
  left: 0; 
  right: 0; 
  transition: all .34s ease-in-out; 
} 
/* Обертка для кнопок */ 
 
.list { 
  position: relative; 
  display: inline-block; 
} 
/* Перемещающийся блок */ 
 
.list:after { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  width: 80px; 
  height: 38px; 
  border: 2px solid #fff; 
  border-radius: 25px; 
  transition: all .34s ease-in-out; 
} 
/* "Да" */ 
 
#on:checked~.list:after { 
  transform: translateX(0%); 
} 
#on:checked~.list .btn_on:after { 
  opacity: 0; 
} 
/* "Нет" */ 
 
#off:checked~.list:after { 
  transform: translateX(100%); 
} 
#off:checked~.list .btn_off:after { 
  opacity: 0; 
}

<form> 
  <input type="radio" name="r" class="radio" id="on" checked> 
  <input type="radio" name="r" class="radio" id="off"> 
 
  <div class="list"> 
    <label class="btn btn_on" for="on">Да</label> 
    <label class="btn btn_off" for="off">Нет</label> 
  </div> 
</form> 
 
<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

Мой такой вариант (не думаю, что идеален, возможно кто-то напишет лучше):

var  
yes         = $('#on').find('input'), 
no          = $('#off').find('input'), 
labelForYes = yes.next('.wpcf7-list-item-label'), 
labelForNo  = no.next('.wpcf7-list-item-label'), 
wrap        = yes.closest('p'), 
inputs      = wrap.find('[type="radio"]'); 
 
wrap.addClass('list'); 
wrap.find('br').hide(); 
inputs.hide(); 
 
var list = $('.list'); 
 
labelForYes.on('click', function(){ 
  no.prop( "checked", false); 
  yes.prop( "checked", true); 
   
  list.removeClass('off').addClass('on'); 
}); 
 
labelForNo.on('click', function(){ 
  yes.prop( "checked", false); 
  no.prop( "checked", true); 
   
  list.removeClass('on').addClass('off'); 
});

/* Базовые стили */ 
 
*, 
*:before, 
*:after { 
  box-sizing: border-box; 
} 
body { 
  background: #964939; 
} 
 
/* Доп.стили для <p>  обертки*/ 
.list span { 
  display: inline-block; 
  vertical-align: middle; 
  width: 80px; 
  line-height: 0; 
} 
 
.wpcf7-form-control-wrap{ 
  float:left; 
} 
 
/* Стили для кнопок */ 
span.wpcf7-list-item-label { 
  display: inline-block; 
  vertical-align: middle; 
  width: 80px; 
  height: 34px; 
  line-height: 1rem; 
  text-align: center; 
  padding: .5rem 1rem; 
  color: #fff; 
  font-family: sans-serif; 
  cursor: pointer; 
  position: relative; 
  z-index: 2; 
} 
/* dotted подчеркивание */ 
.wpcf7-list-item-label:after { 
  content: '....'; 
  position: absolute; 
  bottom: -3px; 
  left: 0; 
  right: 0; 
  transition: all .34s ease-in-out; 
} 
/* Обертка для кнопок */ 
.list { 
  position: relative; 
  display: inline-block; 
  overflow: hidden; 
  height: 40px; 
} 
/* Перемещающийся блок */ 
.list:after { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  width: 80px; 
  height: 38px; 
  border: 2px solid #fff; 
  border-radius: 25px; 
  transition: all .34s ease-in-out; 
} 
/* "Да" */ 
.on.list:after { 
  transform: translateX(0%); 
} 
/* "Нет" */ 
.off.list:after { 
  transform: translateX(100%); 
} 
 
/* Убираем подчеркивание */ 
input:checked+span.wpcf7-list-item-label:after { 
  opacity: 0; 
}

<script src="https://code.jquery.com/jquery-1.11.3.js"></script> 
   
<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>