| <!DOCTYPE HTML> |
| <html> |
| <head> |
| <style> |
| input { |
| background-color: blue; |
| width: 15px; |
| height: 15px; |
| -webkit-appearance: none; |
| } |
| .checked { |
| border: 2px solid red; |
| } |
| .indeterminate { |
| background-color: green; |
| } |
| .disabled { |
| border-left: 3px solid orange; |
| } |
| </style> |
| </head> |
| <body> |
| <div> |
| <input type="radio" class="indeterminate"> |
| <input type="radio" class="indeterminate"> |
| <input type="radio" name="group1" class="indeterminate"> |
| <input type="radio" name="group1" class="indeterminate"> |
| <input type="radio" name="group2" class="indeterminate"> |
| <span><input type="radio" name="group2" class="indeterminate"></span> |
| <input type="radio" name="group3"> |
| <input type="radio" name="group3" checked> |
| <input type="radio" name="group4"> |
| <span><input type="radio" name="group4" checked></span> |
| <input type="radio" disabled class="indeterminate disabled"> |
| <input type="radio" name="group5" disabled class="indeterminate disabled"> |
| <input type="radio" name="group5" disabled class="indeterminate disabled"> |
| <input type="radio" name="group6" disabled class="indeterminate disabled"> |
| <span><input type="radio" name="group6" disabled class="indeterminate disabled"></span> |
| <input type="radio" name="group7" disabled class="disabled"> |
| <input type="radio" name="group7" checked disabled class="disabled"> |
| <input type="radio" name="group8" disabled class="disabled"> |
| <span><input type="radio" name="group8" checked disabled class="disabled"></span> |
| <input type="radio" readonly class="indeterminate"> |
| <input type="radio" name="group9" readonly class="indeterminate"> |
| <input type="radio" name="group9" readonly class="indeterminate"> |
| <input type="radio" name="group10" readonly class="indeterminate"> |
| <span><input type="radio" name="group10" readonly class="indeterminate"></span> |
| <input type="radio" name="group11" readonly> |
| <input type="radio" name="group11" checked readonly> |
| <input type="radio" name="group12" readonly> |
| <span><input type="radio" name="group12" checked readonly></span> |
| </div> |
| <form> |
| <input type="radio" class="indeterminate"> |
| <input type="radio" class="indeterminate"> |
| <input type="radio" name="group1" class="indeterminate"> |
| <input type="radio" name="group1" class="indeterminate"> |
| <input type="radio" name="group2" class="indeterminate"> |
| <span><input type="radio" name="group2" class="indeterminate"></span> |
| <input type="radio" name="group3"> |
| <input type="radio" name="group3" checked class="checked"> |
| <input type="radio" name="group4"> |
| <span><input type="radio" name="group4" checked class="checked"></span> |
| <input type="radio" disabled class="indeterminate disabled"> |
| <input type="radio" name="group5" disabled class="indeterminate disabled"> |
| <input type="radio" name="group5" disabled class="indeterminate disabled"> |
| <input type="radio" name="group6" disabled class="indeterminate disabled"> |
| <span><input type="radio" name="group6" disabled class="indeterminate disabled"></span> |
| <input type="radio" name="group7" disabled class="disabled"> |
| <input type="radio" name="group7" checked disabled class="checked disabled"> |
| <input type="radio" name="group8" disabled class="disabled"> |
| <span><input type="radio" name="group8" checked disabled class="checked disabled"></span> |
| <input type="radio" readonly class="indeterminate"> |
| <input type="radio" name="group9" readonly class="indeterminate"> |
| <input type="radio" name="group9" readonly class="indeterminate"> |
| <input type="radio" name="group10" readonly class="indeterminate"> |
| <span><input type="radio" name="group10" readonly class="indeterminate"></span> |
| <input type="radio" name="group11" readonly> |
| <input type="radio" name="group11" checked readonly class="checked"> |
| <input type="radio" name="group12" readonly> |
| <span><input type="radio" name="group12" checked readonly class="checked"></span> |
| </form> |
| <form disabled> |
| <input type="radio" class="indeterminate"> |
| <input type="radio" class="indeterminate"> |
| <input type="radio" name="group1" class="indeterminate"> |
| <input type="radio" name="group1" class="indeterminate"> |
| <input type="radio" name="group2" class="indeterminate"> |
| <span><input type="radio" name="group2" class="indeterminate"></span> |
| <input type="radio" name="group3"> |
| <input type="radio" name="group3" checked class="checked"> |
| <input type="radio" name="group4"> |
| <span><input type="radio" name="group4" checked class="checked"></span> |
| <input type="radio" disabled class="indeterminate disabled"> |
| <input type="radio" name="group5" disabled class="indeterminate disabled"> |
| <input type="radio" name="group5" disabled class="indeterminate disabled"> |
| <input type="radio" name="group6" disabled class="indeterminate disabled"> |
| <span><input type="radio" name="group6" disabled class="indeterminate disabled"></span> |
| <input type="radio" name="group7" disabled class="disabled"> |
| <input type="radio" name="group7" checked disabled class="checked disabled"> |
| <input type="radio" name="group8" disabled class="disabled"> |
| <span><input type="radio" name="group8" checked disabled class="checked disabled"></span> |
| <input type="radio" readonly class="indeterminate"> |
| <input type="radio" name="group9" readonly class="indeterminate"> |
| <input type="radio" name="group9" readonly class="indeterminate"> |
| <input type="radio" name="group10" readonly class="indeterminate"> |
| <span><input type="radio" name="group10" readonly class="indeterminate"></span> |
| <input type="radio" name="group11" readonly> |
| <input type="radio" name="group11" checked readonly class="checked"> |
| <input type="radio" name="group12" readonly> |
| <span><input type="radio" name="group12" checked readonly class="checked"></span> |
| </form> |
| <fieldset disabled class="disabled"> |
| <input type="radio" class="indeterminate disabled"> |
| <input type="radio" class="indeterminate disabled"> |
| <input type="radio" name="group1" class="indeterminate disabled"> |
| <input type="radio" name="group1" class="indeterminate disabled"> |
| <input type="radio" name="group2" class="indeterminate disabled"> |
| <span><input type="radio" name="group2" class="indeterminate disabled"></span> |
| <input type="radio" name="group3" class="disabled"> |
| <input type="radio" name="group3" checked class="checked disabled"> |
| <input type="radio" name="group4" class="disabled"> |
| <span><input type="radio" name="group4" checked class="checked disabled"></span> |
| <input type="radio" disabled class="indeterminate disabled"> |
| <input type="radio" name="group5" disabled class="indeterminate disabled"> |
| <input type="radio" name="group5" disabled class="indeterminate disabled"> |
| <input type="radio" name="group6" disabled class="indeterminate disabled"> |
| <span><input type="radio" name="group6" disabled class="indeterminate disabled"></span> |
| <input type="radio" name="group7" disabled class="disabled"> |
| <input type="radio" name="group7" checked disabled class="checked disabled"> |
| <input type="radio" name="group8" disabled class="disabled"> |
| <span><input type="radio" name="group8" checked disabled class="checked disabled"></span> |
| <input type="radio" readonly class="indeterminate disabled"> |
| <input type="radio" name="group9" readonly class="indeterminate disabled"> |
| <input type="radio" name="group9" readonly class="indeterminate disabled"> |
| <input type="radio" name="group10" readonly class="indeterminate disabled"> |
| <span><input type="radio" name="group10" readonly class="indeterminate disabled"></span> |
| <input type="radio" name="group11" readonly class="disabled"> |
| <input type="radio" name="group11" checked readonly class="checked disabled"> |
| <input type="radio" name="group12" readonly class="disabled"> |
| <span><input type="radio" name="group12" checked readonly class="checked disabled"></span> |
| </fieldset> |
| <form> |
| <fieldset disabled class="disabled"> |
| <input type="radio" class="indeterminate disabled"> |
| <input type="radio" class="indeterminate disabled"> |
| <input type="radio" name="group1" class="indeterminate disabled"> |
| <input type="radio" name="group1" class="indeterminate disabled"> |
| <input type="radio" name="group2" class="indeterminate disabled"> |
| <span><input type="radio" name="group2" class="indeterminate disabled"></span> |
| <input type="radio" name="group3" class="disabled"> |
| <input type="radio" name="group3" checked class="disabled"> |
| <input type="radio" name="group4" class="disabled"> |
| <span><input type="radio" name="group4" checked class="disabled"></span> |
| <input type="radio" disabled class="indeterminate disabled"> |
| <input type="radio" name="group5" disabled class="indeterminate disabled"> |
| <input type="radio" name="group5" disabled class="indeterminate disabled"> |
| <input type="radio" name="group6" disabled class="indeterminate disabled"> |
| <span><input type="radio" name="group6" disabled class="indeterminate disabled"></span> |
| <input type="radio" name="group7" disabled class="disabled"> |
| <input type="radio" name="group7" checked disabled class="disabled"> |
| <input type="radio" name="group8" disabled class="disabled"> |
| <span><input type="radio" name="group8" checked disabled class="disabled"></span> |
| <input type="radio" readonly class="indeterminate disabled"> |
| <input type="radio" name="group9" readonly class="indeterminate disabled"> |
| <input type="radio" name="group9" readonly class="indeterminate disabled"> |
| <input type="radio" name="group10" readonly class="indeterminate disabled"> |
| <span><input type="radio" name="group10" readonly class="indeterminate disabled"></span> |
| <input type="radio" name="group11" readonly class="disabled"> |
| <input type="radio" name="group11" checked readonly class="disabled"> |
| <input type="radio" name="group12" readonly class="disabled"> |
| <span><input type="radio" name="group12" checked readonly class="disabled"></span> |
| </fieldset> |
| <fieldset> |
| <input type="radio" class="indeterminate"> |
| <input type="radio" class="indeterminate"> |
| <input type="radio" name="group1" class="indeterminate"> |
| <input type="radio" name="group1" class="indeterminate"> |
| <input type="radio" name="group2" class="indeterminate"> |
| <span><input type="radio" name="group2" class="indeterminate"></span> |
| <input type="radio" name="group3"> |
| <input type="radio" name="group3" checked class="checked"> |
| <input type="radio" name="group4"> |
| <span><input type="radio" name="group4" checked class="checked"></span> |
| <input type="radio" disabled class="indeterminate disabled"> |
| <input type="radio" name="group5" disabled class="indeterminate disabled"> |
| <input type="radio" name="group5" disabled class="indeterminate disabled"> |
| <input type="radio" name="group6" disabled class="indeterminate disabled"> |
| <span><input type="radio" name="group6" disabled class="indeterminate disabled"></span> |
| <input type="radio" name="group7" disabled class="disabled"> |
| <input type="radio" name="group7" checked disabled class="checked disabled"> |
| <input type="radio" name="group8" disabled class="disabled"> |
| <span><input type="radio" name="group8" checked disabled class="checked disabled"></span> |
| <input type="radio" readonly class="indeterminate"> |
| <input type="radio" name="group9" readonly class="indeterminate"> |
| <input type="radio" name="group9" readonly class="indeterminate"> |
| <input type="radio" name="group10" readonly class="indeterminate"> |
| <span><input type="radio" name="group10" readonly class="indeterminate"></span> |
| <input type="radio" name="group11" readonly> |
| <input type="radio" name="group11" checked readonly class="checked"> |
| <input type="radio" name="group12" readonly> |
| <span><input type="radio" name="group12" checked readonly class="checked"></span> |
| </fieldset> |
| </form> |
| </body> |
| </html> |