// Смотрите html и css
<form id="form143" name="form143" class="wufoo topLabel page1" accept-charset="UTF-8" autocomplete="off" enctype="multipart/form-data" method="post" novalidate
action="https://examples.wufoo.com/forms/custom-checkboxes-and-radio-buttons/">
<header id="header" class="info">
<h2>Custom Checkboxes and Radio Buttons</h2>
<div>Works in IE9+, Firefox 3.5+, Safari 1.3+, Opera 6+, Chrome anything.<br />
<br />
In browsers where it doesn't "work", it gracefully degrades back to regular checkboxes / radio buttons.</div>
</header>
<ul>
<li id="fo143li1" class="notranslate ">
<fieldset>
<![if !IE | (gte IE 8)]>
<legend id="title1" class="desc">
Select a Choice
</legend>
<![endif]>
<!--[if lt IE 8]>
<label id="title1" class="desc">
Select a Choice
</label>
<![endif]-->
<div>
<input id="radioDefault_1" name="Field1" type="hidden" value="" />
<span>
<input id="Field1_0" name="Field1" type="radio" class="field radio" value="First Choice" tabindex="1" onchange="handleInput(this);" onmouseup="handleInput(this);" checked="checked" />
<label class="choice" for="Field1_0" >
First Choice</label>
</span>
<span>
<input id="Field1_1" name="Field1" type="radio" class="field radio" value="Second Choice" tabindex="2" onchange="handleInput(this);" onmouseup="handleInput(this);" />
<label class="choice" for="Field1_1" >
Second Choice</label>
</span>
<span>
<input id="Field1_2" name="Field1" type="radio" class="field radio" value="Third Choice" tabindex="3" onchange="handleInput(this);" onmouseup="handleInput(this);" />
<label class="choice" for="Field1_2" >
Third Choice</label>
</span>
</div>
</fieldset>
</li>
<li id="fo143li2" class="notranslate ">
<fieldset>
<![if !IE | (gte IE 8)]>
<legend id="title2" class="desc">
Check All That Apply
</legend>
<![endif]>
<!--[if lt IE 8]>
<label id="title2" class="desc">
Check All That Apply
</label>
<![endif]-->
<div>
<span>
<input id="Field2" name="Field2" type="checkbox" class="field checkbox" value="First Choice" tabindex="4" onchange="handleInput(this);" checked="checked" />
<label class="choice" for="Field2">First Choice</label>
</span>
<span>
<input id="Field3" name="Field3" type="checkbox" class="field checkbox" value="Second Choice" tabindex="5" onchange="handleInput(this);" />
<label class="choice" for="Field3">Second Choice</label>
</span>
<span>
<input id="Field4" name="Field4" type="checkbox" class="field checkbox" value="Third Choice" tabindex="6" onchange="handleInput(this);" />
<label class="choice" for="Field4">Third Choice</label>
</span>
</div>
</fieldset>
</li>
<li class="buttons ">
<div>
<input type="hidden" name="currentPage" id="currentPage" value="BR0wGNq1Wpm4boNzHwuBeNVDwuBeQKxX86IAnNX7wuBeWdUUgdOs=" />
<input id="saveForm" name="saveForm" class="btTxt submit"
type="submit" value="Submit"
onmousedown="doSubmitEvents();" />
</div>
</li>
<li class="hide">
<label for="comment">Do Not Fill This Out</label>
<textarea name="comment" id="comment" rows="1" cols="1"></textarea>
<input type="hidden" id="idstamp" name="idstamp" value="2+VQV4596n0kX1nDMOgGmsNsyKMgZhH2hfble74K5eg=" />
<input type="hidden" id="stats" name="stats" value="{"errors":0,"startTime":0,"endTime":0,"referer":null}" />
<input type="hidden" id="clickOrEnter" name="clickOrEnter" value="" />
</li>
</ul>
</form>
/*
Hide the original radios and checkboxes
(but still accessible)
:not(#foo) > is a rule filter to block browsers
that don't support that selector from
applying rules they shouldn't
*/
li:not(#foo) > fieldset > div > span > input[type='radio'],
li:not(#foo) > fieldset > div > span > input[type='checkbox'] {
/* Hide the input, but have it still be clickable */
opacity: 0;
float: left;
width: 18px;
}
li:not(#foo) > fieldset > div > span > input[type='radio'] + label,
li:not(#foo) > fieldset > div > span > input[type='checkbox'] + label {
margin: 0;
clear: none;
/* Left padding makes room for image */
padding: 5px 0 4px 24px;
/* Make look clickable because they are */
cursor: pointer;
background: url(https://css-tricks.com/wufoo/themes/customradiosandcheckboxes/off.png) left center no-repeat;
}
/*
Change from unchecked to checked graphic
*/
li:not(#foo) > fieldset > div > span > input[type='radio']:checked + label {
background-image: url(https://css-tricks.com/wufoo/themes/customradiosandcheckboxes/radio.png);
}
li:not(#foo) > fieldset > div > span > input[type='checkbox']:checked + label {
background-image: url(https://css-tricks.com/wufoo/themes/customradiosandcheckboxes/check.png);
}