JavaScript を使用して、input_form 特殊効果のラジオとチェックボックスのスタイルを変更します。

この記事に関連する写真

<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>JavaScript を使用してラジオとチェックボックスのスタイルをカスタマイズします <h4> </h4> ラジオボタンのスタイル: <div class="input_style"> <span> <input type="radio" name="sex" value="boy" checked id="sex_boy"> </span><label for="sex_boy"></label>男性<span> <input type="radio" name="sex" value="girl" id="sex_girl"> </span><label for="sex_girl"></label>女性</div> <div class="input_style"> <span> <input type="radio" name="marry" value="yes" id="marry_yes"> </span><label for="marry_yes"></label>男の子<span> <input type="radio" name="marry" value="not" checked id="marry_not"> </span><label for="marry_not"></label>女の子</div> <h4> </h4> チェックボックスのスタイル: <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>フラッシュ</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>フレックス</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>理解しました</li> <li> <span><input type="checkbox" name="hobby" id="hobby10"> </span><label for="hobby10"></label>全般</li> <li> <span><input type="checkbox" name="hobby" id="hobby11"> </span><label for="hobby11"></label>熟練</li> <li> <span><input type="checkbox" name="hobby" id="hobby12"> </span><label for="hobby12"></label>マスタリー</li> <li> <span><input type="checkbox" name="hobby" id="hobby13"> </span><label for="hobby13"></label>上級専門家</li> </ul> <div class="button" id="button"> <input type="button" value="加载样式"> </div>
[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、

を実行するために更新する必要があります]