HTML рд░реВрдкреЛрдВ рдХреЗ рд▓рд┐рдП рд╕реАрдПрд╕рдПрд╕ рд╢реИрд▓рд┐рдпреЛрдВ рдХрд╛ рдирд┐рд░реНрдорд╛рдг рдХрд░рддреЗ рд╕рдордп, рдбреЗрд╡рд▓рдкрд░реНрд╕ рдЕрдХреНрд╕рд░ рдЪреЗрдХрдмреЙрдХреНрд╕ рдФрд░ рд░реЗрдбрд┐рдпреЛ рдмрдЯрди рдХреА рдЙрдкрд╕реНрдерд┐рддрд┐ рдХреЛ рд╕реАрдзреЗ рдмрджрд▓рдиреЗ рдореЗрдВ рдЕрд╕рдорд░реНрдерддрд╛ рдХрд╛ рд╕рд╛рдордирд╛ рдХрд░рддреЗ рд╣реИрдВред рдЖрдЗрдП рджреЗрдЦреЗрдВ рдХрд┐ CSS3 рдЯреВрд▓реНрд╕ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд┐рдП рдмрд┐рдирд╛ рдФрд░ рдХрд┐рд╕реА рдЬрд╛рд╡рд╛рд╕реНрдХреНрд░рд┐рдкреНрдЯ рдХреЛрдб рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд┐рдП рдмрд┐рдирд╛ рдЗрд╕ рд╕реАрдорд╛ рдХреЗ рдЖрд╕рдкрд╛рд╕ рдХреИрд╕реЗ рдкреНрд░рд╛рдкреНрдд рдХрд░реЗрдВредрдЗрд╕рд▓рд┐рдП, рд╢реБрд░реБрдЖрдд рдХреЗ рд▓рд┐рдП, рдлреЙрд░реНрдо рдореЗрдВ рдХреБрдЫ рд╕рд╛рдорд╛рдиреНрдп рдЪреЗрдХрдмреЙрдХреНрд╕ рдФрд░ рд╕реНрд╡рд┐рдЪ рдЬреЛрдбрд╝реЗрдВ:/* */
<div>
<input type="checkbox" id="cb1"> <label for="cb1"> 1</label>
</div>
<div>
<input type="checkbox" id="cb2"> <label for="cb2"> 2</label>
</div>
<div>
<input type="checkbox" id="cb3"> <label for="cb3"> 3</label>
</div>
/* */
<div>
<input type="radio" name="rb" id="rb1" checked> <label for="rb1"> 1</label>
</div>
<div>
<input type="radio" name="rb" id="rb2"> <label for="rb2"> 2</label>
</div>
<div>
<input type="radio" name="rb" id="rb3"> <label for="rb3"> 3</label>
</div>
рд╕реНрдХреЛрдк рд╕реЗ рдкрд░реЗ рддрддреНрд╡реЛрдВ рдХреЗ рдорд╛рдирдХ рдкреНрд░рджрд░реНрд╢рди рдХреЛ рд╕реНрдерд╛рдирд╛рдВрддрд░рд┐рдд рдХрд░реЗрдВ рдФрд░ рдЖрд╕рдиреНрди рд▓реЗрдмрд▓ рдкрд░ рдЗрдВрдбреЗрдВрдЯ рдЬреЛрдбрд╝реЗрдВ:input[type="checkbox"]:checked,
input[type="checkbox"]:not(:checked),
input[type="radio"]:checked,
input[type="radio"]:not(:checked)
{
position: absolute;
left: -9999px;
}
input[type="checkbox"]:checked + label,
input[type="checkbox"]:not(:checked) + label,
input[type="radio"]:checked + label,
input[type="radio"]:not(:checked) + label {
display: inline-block;
position: relative;
padding-left: 28px;
line-height: 20px;
cursor: pointer;
}
рд▓реЗрдмрд▓ рд╕реЗ рдкрд╣рд▓реЗ, рд╣рдорд╛рд░реЗ рдХрд╕реНрдЯрдо рддрддреНрд╡реЛрдВ рдХреЗ рд▓рд┐рдП рд╕реНрдЯрд╛рдЗрд▓ рдХрдВрдЯреЗрдирд░ рдЬреЛрдбрд╝реЗрдВред рдЭрдВрдбреЗ рдХреЗ рд▓рд┐рдП, рдпреЗ рд╕реБрдВрджрд░рддрд╛ рдХреЗ рд▓рд┐рдП рдереЛрдбрд╝реЗ рдЧреЛрд▓ рдХрд┐рдирд╛рд░реЛрдВ рдХреЗ рд╕рд╛рде рд╡рд░реНрдЧ рд╣реЛрдВрдЧреЗ, рдФрд░ рд╕реНрд╡рд┐рдЪ рдХреЗ рд▓рд┐рдП, рдмрд╕ рдЫреЛрдЯреЗ рд╡реГрддреНрдд:input[type="checkbox"]:checked + label:before,
input[type="checkbox"]:not(:checked) + label:before,
input[type="radio"]:checked + label:before,
input[type="radio"]:not(:checked) + label:before {
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 18px;
height: 18px;
border: 1px solid #dddddd;
background-color: #ffffff;
}
input[type="checkbox"]:checked + label:before,
input[type="checkbox"]:not(:checked) + label:before {
border-radius: 2px;
}
input[type="radio"]:checked + label:before,
input[type="radio"]:not(:checked) + label:before {
border-radius: 100%;
}
рдЕрдм рдЪрдпрди рд╕рдВрдХреЗрддрдХ рдЬреЛрдбрд╝реЗрдВред рдЭрдВрдбреЗ рдХреЗ рд▓рд┐рдП, рдпреЗ рдкрдВрдЬреЗ рд╣реЛрдВрдЧреЗ, рд╕реНрд╡рд┐рдЪ рдХреЗ рд▓рд┐рдП, рд░рдВрдЧ рд╕реЗ рднрд░реЗ рдЫреЛрдЯреЗ рд╕рд░реНрдХрд▓ рдХрдВрдЯреЗрдирд░ рд╕реЗ рдЫреЛрдЯреЗ рд╣реЛрдВрдЧреЗред рдПрдХ рдмрдбрд╝реЗ рдкреНрд░рднрд╛рд╡ рдХреЗ рд▓рд┐рдП, рд╣рдордиреЗ рдПрдХ рдЫреЛрдЯрд╛ рдПрдиреАрдореЗрд╢рди рднреА рд╕реНрдерд╛рдкрд┐рдд рдХрд┐рдпрд╛ рд╣реИ:input[type="checkbox"]:checked + label:after,
input[type="checkbox"]:not(:checked) + label:after,
input[type="radio"]:checked + label:after,
input[type="radio"]:not(:checked) + label:after {
content: "";
position: absolute;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
input[type="checkbox"]:checked + label:after,
input[type="checkbox"]:not(:checked) + label:after {
left: 3px;
top: 4px;
width: 10px;
height: 5px;
border-radius: 1px;
border-left: 4px solid #e145a3;
border-bottom: 4px solid #e145a3;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
input[type="radio"]:checked + label:after,
input[type="radio"]:not(:checked) + label:after {
left: 5px;
top: 5px;
width: 10px;
height: 10px;
border-radius: 100%;
background-color: #e145a3;
}
рдЬреИрдХрдбреЙ рдХреЛ рдЪрд┐рддреНрд░рд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП, рд╣рдо рдПрдХ рдЫреЛрдЯреА рдЖрдпрдд рдХреЛ рдШреБрдорд╛рддреЗ рд╣реИрдВ, рдЬрд┐рд╕рдХреЗ рджреЛрдиреЛрдВ рдХрд┐рдирд╛рд░реЛрдВ рдХреЛ рд░рдВрдЧ рдореЗрдВ рд░рдВрдЧрд╛ рдЬрд╛рддрд╛ рд╣реИ, 45 рдбрд┐рдЧреНрд░реА рд╡рд╛рдорд╛рд╡рд░реНрддредрдзреНрдпрд╛рди рджреЗрдВ: рдЪрдпрдирдХрд░реНрддрд╛рдУрдВ рдХреЗ рдкрд╣рд▓реЗ рдФрд░ рдмрд╛рдж рдореЗрдВ: рдЖрдк рд▓реЗрдмрд▓ рдХреА рд╕рд╛рдордЧреНрд░реА рд╕реЗ рдкрд╣рд▓реЗ рдФрд░ рдмрд╛рдж рдореЗрдВ рддреБрд░рдВрдд рд╕рд╛рдордЧреНрд░реА рдЬреЛрдбрд╝рдиреЗ рдХреА рдЕрдиреБрдорддрд┐ рджреЗрддреЗ рд╣реИрдВред рдЪреВрдВрдХрд┐ рд▓реЗрдмрд▓ рдХреЗ рд▓рд┐рдП рд╣рдо рд╕рд╛рдкреЗрдХреНрд╖ рд╕реНрдерд┐рддрд┐ (рд╕реНрдерд┐рддрд┐: рд╕рд╛рдкреЗрдХреНрд╖) рдирд┐рд░реНрдзрд╛рд░рд┐рдд рдХрд░рддреЗ рд╣реИрдВ, рд╣рдо рдЙрдирдХреА рд╕рд╛рдордЧреНрд░реА рдХреЗ рд▓рд┐рдП рдкреНрд░рд╛рд╕рдВрдЧрд┐рдХ рдкреВрд░реНрдг рд╕реНрдерд┐рддрд┐ рдирд┐рд░реНрдзрд╛рд░рд┐рдд рдХрд░ рд╕рдХрддреЗ рд╣реИрдВредрдпрд╣ рдЖрдЗрдЯрдо рдирд╣реАрдВ рдЪреБрдиреЗ рдЬрд╛рдиреЗ рдкрд░ рдЪрдпрди рд╕рдВрдХреЗрддрдХреЛрдВ рдХреЛ рдЫрд┐рдкрд╛рдиреЗ рдХреЗ рд▓рд┐рдП рд░рд╣рддрд╛ рд╣реИ, рдФрд░ рдЬрдм рдЖрдЗрдЯрдо рдЪрдпрдирд┐рдд рд╕реНрдерд┐рддрд┐ рдореЗрдВ рд╣реЛрддрд╛ рд╣реИ, рддреЛ рддрджрдиреБрд╕рд╛рд░ рдЙрдиреНрд╣реЗрдВ рдкреНрд░рджрд░реНрд╢рд┐рдд рдХрд░реЗрдВ:input[type="checkbox"]:not(:checked) + label:after,
input[type="radio"]:not(:checked) + label:after {
opacity: 0;
}
input[type="checkbox"]:checked + label:after,
input[type="radio"]:checked + label:after {
opacity: 1;
}
рд╣рдо рдЬреЛрдбрд╝рддреЗ рд╣реИрдВ рдХрд┐ рдпрд╣рд╛рдВ рд╡рд░реНрдгрд┐рдд рд╕рдорд╛рдзрд╛рди рдХреНрд░реЛрдо, рдлрд╝рд╛рдпрд░рдлрд╝реЙрдХреНрд╕, рд╕рдлрд╛рд░реА, рдУрдкреЗрд░рд╛ рдХреЗ рд╕рднреА рдЖрдзреБрдирд┐рдХ рд╕рдВрд╕реНрдХрд░рдгреЛрдВ рдореЗрдВ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ, рдФрд░ рдпрд╣ рднреА, рд╕рдВрд╕реНрдХрд░рдг 9 рд╕реЗ рд╢реБрд░реВ рд╣реЛрддрд╛ рд╣реИ, рдФрд░ рдЗрдВрдЯрд░рдиреЗрдЯ рдПрдХреНрд╕рдкреНрд▓реЛрд░рд░ рдореЗрдВредрдкреВрд░реНрдг рд╕реАрдПрд╕рдПрд╕ рдкрд░рд┐рднрд╛рд╖рд╛рдПрдБ рдпрд╣рд╛рдБ рдбрд╛рдЙрдирд▓реЛрдб рдХреА рдЬрд╛ рд╕рдХрддреА рд╣реИрдВ ред