There is a yes-no switch that I want to style according to the design. picture

but not yet, here are the developments in the fidle

$('input').styler(); 
 div { background-color: #964939; color: white; } .jq-radio { width: 28px; height: 12px; font-size: 16px; font-weight: 700; border: 0; border-bottom: 3px dotted white; border-radius: 0; box-shadow: none; background: transparent; } .jq-radio~span { position: absolute; top: -8px; left: 6px; } .jq-radio.checked { width: 64px; height: 44px; border: 2px solid white; border-radius: 50%; } .jq-radio.checked~span { position: absolute; top: -4px; left: 22px; } input[type="submit"] { width: 204px; height: 44px; background-color: #ffd900; color: #231f20; font-size: 16px; font-weight: 700; padding: 0; } .jq-radio .jq-radio__div { display: none; } 
 <link href="https://dimox.imtqy.com/jQueryFormStyler/jquery.formstyler.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://dimox.imtqy.com/jQueryFormStyler/jquery.formstyler.js"></script> <div> <p> <input name="answer" class="styler" type="radio" value="yes">Да <input name="answer" class="styler" type="radio" value="no" checked>Нет</p> <p> <input type="submit" value="Выбрать"> </p> </div>

  • Well, as far as I know, such things are done as follows: Each label is tied to a label , the input is hidden, and the label styled as needed. - pepel_xD

2 answers 2

Here is the css:

 /* Базовые стили */ *, *: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>

  • And in the transfer of the form to somehow decide which option is chosen? just in the code I see that the checked position in the input does not change .. - Vasya
  • one
    @ Vasya, comment out the lines .radio { display: none; } .radio { display: none; } and make sure everything changes! - HamSter
  • But for the contact form 7 plug-in, due to additional wrappers, such a trick will not be able to roll already? jsfiddle.net/vqq64ybv - John
  • one
    @ Vasya, I would advise you to ask this as a separate question. contact form 7, if I'm not mistaken, generates its form. With her a little more problematic will be. - HamSter
  • posted here.stackoverflow.com/questions/584871/… - Vasya

Something like this?

 div{ background-color: #964939; color: white; padding: 5px; } .radio{ display: none; } .radio + label{ padding: 10px; margin-right: 2px; margin-left: 2px; border: none; } .radio + label > span{ border-bottom: 5px dotted; padding-left: 3px; /*add more dots*/ padding-right: 3px; padding-bottom: 2px; } .radio:checked + label{ /*add round border*/ border: 2px solid white; border-radius: 20px; margin-right: 0px; margin-left: 0px; } .radio:checked + label > span{ border-bottom: none ; /*remove dots*/ } 
 <div> <p> <input name="answer" class="radio" type="radio" value="yes" id="yes"><label for="yes"><span>Да</span></label> <input name="answer" class="radio" type="radio" value="no" id="no" checked/><label for="no"><span> Нет</span></label> </div>

  • one
    Pay attention to the simplicity and most importantly the absence of unnecessary annoying whistling-fakes in the form of animation of a slow crawling frame. - Sergey