Use JavaScript to change the radio and checkbox styles in the input_form special effects

Pictures involved in this article

<style type="text/css"> body { margin: 0px; padding: 0px; font-size: 13px; } .input_style { padding: 6px 0px; width: 600px; margin: 0px auto; border-bottom: #666666 1px dotted; } .input_style span { display: inline-block; width: 15px; height: 15px; text-align: left; vertical-align: middle; _overflow: hidden; } .input_style label { padding: 0px 6px; cursor: pointer; } .input_style input { cursor: pointer; } .checkbox { padding: 0px; list-style: none; width: 600px; margin: 6px auto; height: auto; overflow: hidden; } .checkbox li { padding: 3px 0px; float: left; } h4 { width: 600px; margin: 0px auto; margin-top: 30px; } .button { width: 600px; text-align: center; margin: 0px auto; } </style> <title> </title>Use javascript to customize radio and checkbox styles <h4> </h4> Radio button style: <div class="input_style"> <span> <input type="radio" name="sex" value="boy" checked id="sex_boy"> </span><label for="sex_boy"></label>Male<span> <input type="radio" name="sex" value="girl" id="sex_girl"> </span><label for="sex_girl"></label>Female</div> <div class="input_style"> <span> <input type="radio" name="marry" value="yes" id="marry_yes"> </span><label for="marry_yes"></label>boy<span> <input type="radio" name="marry" value="not" checked id="marry_not"> </span><label for="marry_not"></label>girl</div> <h4> </h4> Checkbox style: <ul class="checkbox input_style"> <li> <span><input type="checkbox" name="hobby" checked id="hobby1"> </span><label for="hobby1"></label>xhtml</li> <li> <span><input type="checkbox" name="hobby" id="hobby2"> </span><label for="hobby2"></label>CSS</li> <li> <span><input type="checkbox" name="hobby" id="hobby3"> </span><label for="hobby3"></label>Javascript</li> <li> <span><input type="checkbox" name="hobby" id="hobby4"> </span><label for="hobby4"></label>Flash</li> <li> <span><input type="checkbox" name="hobby" id="hobby5"> </span><label for="hobby5"></label>Ajax</li> <li> <span><input type="checkbox" name="hobby" id="hobby6"> </span><label for="hobby6"></label>AS</li> <li> <span><input type="checkbox" name="hobby" id="hobby7"> </span><label for="hobby7"></label>Flex</li> <li> <span><input type="checkbox" name="hobby" id="hobby8"> </span><label for="hobby8"></label>PHP/.NET/JSP</li> </ul> <ul class="checkbox input_style"> <li> <span><input type="checkbox" name="hobby" checked id="hobby9"> </span><label for="hobby9"></label>Understand</li> <li> <span><input type="checkbox" name="hobby" id="hobby10"> </span><label for="hobby10"></label>General</li> <li> <span><input type="checkbox" name="hobby" id="hobby11"> </span><label for="hobby11"></label>Skilled</li> <li> <span><input type="checkbox" name="hobby" id="hobby12"> </span><label for="hobby12"></label>Mastery</li> <li> <span><input type="checkbox" name="hobby" id="hobby13"> </span><label for="hobby13"></label>Senior Expert</li> </ul> <div class="button" id="button"> <input type="button" value="加载样式"> </div>
[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute

]