With the advancement and development of front-end technology, traditional form styles are no longer able to meet requirements. Due to beautiful requirements, many such form beautification plug-ins are available on the Internet. I searched the internet and found a lot of them, but they didn't work very well. I don't like loading a group of js in the webpage header, and some webpage headers have long tags, when many js files are loaded together, bugs may occur between them, that is, they are not easy to change.
Plug-ins have the advantages of plug-ins and are convenient. If you use plug-ins for efficiency, it is worth considering. If it is for research and study, it is recommended that you write it yourself. Below is a simple beautification program for radio and checkbox.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html xmlns =" http://www.w3.org/1999/xhtml "> <Head> <meta http-equiv =" Content-Type "content =" text/html; charset = GBK "/> <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; c Ursor: 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 ;} </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. onload = func;} else {window. onload = function () {oldonload (); func () ;};} function radio_style () {if (gettag ("input ")) {var r = gettag ("input"); function select_element (obj, type) {obj. parentNode. style. background = "url (/uploads/allimg/0911/input_style.gif) no-repeat-15px 0px"; if (obj. type = "checkbox") {obj. parentNode. style. background = "url (/uploads/allimg/0911/input_style.gif) no-repeat-15px-15px";} if (type) {obj. parentNode. style. background = "url (/uploads/allimg/0911/input_style.gif) no-repeat 0px 0px"; if (obj. type = "checkbox") {obj. parentNode. style. background = "url (/uploads/allimg/0911/input_style.gif) no-repeat 0px-15px" ;}}for (var I = 0; I <r. length; I ++) {if (r [I]. type = "radio" | r [I]. type = "checkbox") {r [I]. style. opacity = 0; r [I]. style. filter = "alpha (opacity = 0)"; r [I]. onclick = function () {select_element (this); unfocus () ;}if (r [I]. checked = true) {select_element (r [I]);} else {select_element (r [I], 1) ;}} function unfocus () {for (var I = 0; I <r. length; I ++) {if (r [I]. type = "radio" | r [I]. type = "checkbox") {if (r [I]. checked = false) {select_element (r [I], 1) }}}} addLoadEvent (radio_style ); </script> <title> use javascript to customize radio and checkbox styles-bkjia.com </title>
Tip: the code can be modified before running!
HTML code:
Copy to ClipboardReference content: [www.bkjia.com] single answer:
<Span> <input type = "radio" name = "sex" value = "boy" checked = "checked" id = "sex_boy"/> </span> <label for = "sex_boy"> male </label>
<Span> <input type = "radio" name = "sex" value = "girl" id = "sex_girl"/> </span> <label for = "sex_girl"> female </label>
Multiple options:
<Span> <input type = "checkbox" name = "Hober" checked = "checked" id = "hobby1"/> </span> <label for = "hobby1"> xhtml </label>
<Span> <input type = "checkbox" name = "holobby" id = "hobby2"/> </span> <label for = "hobby2"> CSS </label>
<Span> <input type = "checkbox" name = "holobby" id = "hobby3"/> </span> <label for = "hobby3"> Javascript </label>
<Span> <input type = "checkbox" name = "holobby" id = "hobby4"/> </span> <label for = "hobby4"> Flash </label>
<Span> <input type = "checkbox" name = "holobby" id = "hobby5"/> </span> <label for = "hobby5"> Ajax </label>
<Span> <input type = "checkbox" name = "holobby" id = "hobby6"/> </span> <label for = "hobby6"> AS </label>
<Span> <input type = "checkbox" name = "holobby" id = "hobby7"/> </span> <label for = "hobby7"> Flex </label>
<Span> <input type = "checkbox" name = "holobby" id = "hobby8"/> </span> <label for = "hobby8"> PHP /. NET/JSP </label>
Javascript code:
Copy to ClipboardReference: [www.bkjia.com] function radio_style (){
If (gettag ("input ")){
Var r = gettag ("input ");
Function select_element (obj, type ){
Obj. parentNode. style. background = "url(input_style.gif) no-repeat-15px 0px ";
If (obj. type = "checkbox "){
Obj. parentNode. style. background = "url(input_style.gif) no-repeat-15px-15px ";
}
If (type ){
Obj. parentNode. style. background = "url(input_style.gif) no-repeat 0px 0px ";
If (obj. type = "checkbox") {obj. parentNode. style. background = "url(input_style.gif) no-repeat 0px-15px ";}
}
}
For (var I = 0; I <r. length; I ++ ){
If (r [I]. type = "radio" | r [I]. type = "checkbox "){
R [I]. style. opacity = 0; r [I]. style. filter = "alpha (opacity = 0 )";
R [I]. onclick = function () {select_element (this); unfocus ();}
If (r [I]. checked = true) {select_element (r [I]);} else {select_element (r [I], 1 );}
}
}
Function unfocus (){
For (var I = 0; I <r. length; I ++ ){
If (r [I]. type = "radio" | r [I]. type = "checkbox") {if (r [I]. checked = false) {select_element (r [I], 1 )}}
}
}
}
}
CSS section:
Copy to ClipboardReference: [www.bkjia.com]. 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 ;}
In fact, the principle is very simple, that is, to change the transparency of the input to 0, and then add a background to the input. When you select the mouse, change the background to the selected state.
After a slight modification, you can control whether the style is loaded:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html xmlns =" http://www.w3.org/1999/xhtml "> <Head> <meta http-equiv =" Content-Type "content =" text/html; charset = UTF-8 "/> <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> <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. onload = func;} else {window. onload = function () {oldonload (); func () ;};} function radio_style () {if (gettag ("input ")) {var r = gettag ("input"); function select_element (obj, type) {obj. parentNode. style. background = "url (/uploads/allimg/0911/input_style.gif) no-repeat-15px 0px"; if (obj. type = "checkbox") {obj. parentNode. style. background = "url (/uploads/allimg/0911/input_style.gif) no-repeat-15px-15px";} if (type) {obj. parentNode. style. background = "url (/uploads/allimg/0911/input_style.gif) no-repeat 0px 0px"; if (obj. type = "checkbox") {obj. parentNode. style. background = "url (/uploads/allimg/0911/input_style.gif) no-repeat 0px-15px" ;}}for (var I = 0; I <r. length; I ++) {if (r [I]. type = "radio" | r [I]. type = "checkbox") {r [I]. style. opacity = 0; r [I]. style. filter = "alpha (opacity = 0)"; r [I]. onclick = function () {select_element (this); unfocus () ;}if (r [I]. checked = true) {select_element (r [I]);} else {select_element (r [I], 1) ;}} function unfocus () {for (var I = 0; I <r. length; I ++) {if (r [I]. type = "radio" | r [I]. type = "checkbox") {if (r [I]. checked = false) {select_element (r [I], 1) }}} function addevent () {gettag ("input", 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 = "loading style"; gettag ("input", getid ("button") [0]. onclick = function () {this. value = "Remove style"; this. onclick = removeevent; radio_style () ;};} addLoadEvent (addevent ); </script> <title> use javascript to customize radio and checkbox styles </title>
Tip: the code can be modified before running!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
