<div class="wrapper">
<form action="#" class="block-form">
<div class="block-form__title">Form style</div>
<div class="block-form__input">
<div class="checkbox">
<label>Первый выключатель
<input type="checkbox" checked name="namechekbox_1">
</label>
</div>
<div class="checkbox">
<label>Второй выключатель
<input type="checkbox" name="namechekbox_2">
</label>
</div>
</div>
<div class="block-form__input">
<div class="radiobittons">
<div class="radiobuttons__item">
<label>Вариант 1
<input type="radio" value="1" checked name="nameradio">
</label>
</div>
<div class="radiobuttons__item">
<label>Вариант 2
<input type="radio" value="2" name="nameradio">
</label>
</div>
<div class="radiobuttons__item">
<label>Вариант 3
<input type="radio" value="3" name="nameradio">
</label>
</div>
</div>
</div>
<button type="submit" class="button"><span>
Отправить форму
</span></button>
</form>
</div>
label, input[type="checkbox"], input[type="radio"] {
cursor: pointer;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.