The pictures covered in this article
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <style type=" Text/css "> body {margin:0p X 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> <script language= "javascript" TyPe= "Text/javascript" > function getid (ID) {return document.getElementById (ID);} function Gettag (tag, obj) {if (obj) {return obj.getelementsbytagname (tag)} else {return document.getElementsByTagName ( TAG)} function Addloadevent (func) {var oldonload = window.onload; if (typeof window.onload!= "function") {Window.on Load = func; else {window.onload = function () {oldonload (); func ();}}; function Radio_style () {//3 set style if (Gettag ("input")) {var r = Gettag ("input"); function select_element (obj, type) {//1 set background picture obj.parentNode.style.background = "url (/upload/2009-11/ 20091124021750277.gif) no-repeat-15px 0px "; if (Obj.type = = "checkbox") {obj.parentNode.style.background = "url (/upload/2009-11/20091124021750277.gif) no-repeat- 15px-15px "; } if (type) {obj.parentNode.style.background = "url (/upload/2009-11/20091124021750277.gif) no-repeat 0px 0px"; if (Obj.type = = "checkbox") {obj.parentNode.style.background = "url (/upload/2009-11/20091124021750277.gif) No-repeat 0px-15px "; }}//1 for (var i = 0; i < r.length; i++) {if (R[i].type = = "Radio" | | r[i].type = "checkbox") {R[I].STYLE.O pacity = 0; R[i].style.filter = "Alpha (opacity=0)"; Hide real checkbox and Radio R[i].onclick = function () {select_element (this); Unfocus (); } if (r[i].checked = = True) {select_element (r[i]);} else {select_element (r[i], 1);} The function Unfocus () {//2 processing is not selected for (var i = 0; i < r.length i++) {if (R[i].type = "Radio" | | r[i].type = "Che Ckbox ") {if (r[i].checked = = False) {select_element (r[i], 1)}}//2}}//3 function Addevent () {Gettag (" Inpu T ", GetID (" button ")) [0].onclick = function () {this.value =" remove style "; This.onclick = removeevent; Radio_style ();}; function removeevent () {var r = Gettag ("input"); for (var i = 0; i < r.length i++) {if (R[i].type = "Radio" | | r[i].type = = "checkbox") {r[i].style.opacity = 100; R[i].style.filter = "Alpha (opacity=100)"; R[i].onclick = function () {} r[i].parentnode.style.bAckground = "None"; } gettag ("Input", GetID ("button")) [0].value = "load Style"; Gettag ("Input", GetID ("button")) [0].onclick = function () {this.value = "remove style"; This.onclick = removeevent; Radio_style () ; }; } addloadevent (addevent); </script> <title> using JavaScript custom radio and checkbox styles </title> </pead> <body> <p> Single selection Box style:</p> <div class= "Input_style" > <span> <input type= "Radio" name= "Sex" value= "boy" checked= "ch Ecked "id=" Sex_boy "/></span><label for=" Sex_boy "> Men </label> <span> <input type=" Radio " Name= "Sex" value= "Girl" id= "Sex_girl"/></span><label for= "Sex_girl" > Women </label> </div> <div class= "Input_style" > <span> <input type= "Radio" name= "Marry" value= "yes" id= "Marry_yes"/></ Span><label for= "Marry_yes" >boy</label> <span> <input type= "Radio" name= "Marry" value= "not" Checked= "Checked" id= "Marry_not"/></span> <label for= "Marry_not" >girl</label> </div> <p> check box style:</p> <ul class= "checkbox INP Ut_style "> <li><span> <input type= checkbox" name= "Hobby" checked= "checked" id= "hobby1"/></ Span><label for= "hobby1" >xhtml</label></li> <li><span> <input type= "checkbox" Name= "Hobby" id= "hobby2"/></span><label for= "hobby2" >CSS</label></li> <li>< span> <input type= "checkbox" name= "Hobby" id= "hobby3"/></span><label for= "Hobby3" >javascript </label></li> <li><span> <input type= "checkbox" name= "Hobby" id= "Hobby4"/></span ><label for= "Hobby4" >Flash</label></li> <li><span> <input type= "checkbox" Name= "Hobby" id= "hobby5"/></span><label for= "hobby5" >Ajax</label></li> <li><span > <input type= "checkbox" name= "Hobby" id= "Hobby6"/></spAn><label for= "Hobby6" >AS</label></li> <li><span> <input type= "checkbox" Name= " Hobby "id=" Hobby7 "/></span><label for=" Hobby7 ">Flex</label></li> <li><span > <input type= "checkbox" name= "Hobby" id= "hobby8"/></span><label for= "Hobby8" >PHP/.NET/JSP< /label></li> </ul> <ul class= "checkbox Input_style" > <li><span> <input type= "Chec Kbox "name=" hobby "checked=" checked "id=" Hobby9 "/></span><label for=" Hobby9 "> Understanding </label></ li> <li><span> <input type= "checkbox" name= "Hobby" id= "Hobby10"/></span><label for= " Hobby10 "> General </label></li> <li><span> <input type=" checkbox "name=" Hobby "id=" Hobby11 "/ ></span><label for= "Hobby11" > Proficiency </label></li> <li><span> <input type= " CheckBox "Name=" Hobby "id=" Hobby12 "/></span><label for=" HObby12 "> Proficient </label></li> <li><span> <input type=" checkbox "name=" Hobby "id=" HOBBY13 " ></span><label for= "HOBBY13" > Senior expert </label></li> </ul> <div class= "button" id= " Button "> <input type=" button "value=" Load Style "/></div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
