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>자바스크립트를 사용하여 라디오 및 체크박스 스타일 맞춤설정 <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>자바스크립트</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>아약스</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 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다

]