php radio样式美化,用JavaScript更改input中radio和checkbox样式

随着前端技术的进步和发展，传统的表单样式已经不能满足需求，由于美观上的要求，网上现在出现了很多的这种表单美化插件。上网搜了一下，还真的不少，不过都没怎么用，我不喜欢在网页的头部加载一群js，有的网页头部这样的标签排列很长，很多的js一起加载进来，之间可能会出现bug不说，就是当初更改起来也不是很方便。

插件有插件的好处，有它的便捷性。如果为了效率，使用插件值得考虑。如果是为了研究学习，建议还是自己写比较好。下面写了一个简单的radio和checkbox的美化程序。

利用javascript自定义radio及checkbox样式 - veryhuo.com

单选框样式：

男

女

boy

girl

复选框样式：

xhtml

CSS

Javascript

Flash

Ajax

AS

Flex

PHP/.NET/JSP

了解

一般

熟练

精通

资深专家

如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：http://www.veryhuo.com/

提示：可修改后代码再运行!

HTML代码：

Copy to Clipboard

引用的内容：[www.veryhuo.com]

单选：

男

女

多选：

xhtml

CSS

Javascript

Flash

Ajax

AS

Flex

PHP/.NET/JSP

Javascript部分代码：

Copy to Clipboard

引用的内容：[www.veryhuo.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;iif(r[i].type=="radio"||r[i].type=="checkbox"){

r[i].style.opacity=0;r[i].style.filter="alpha(opacity=0)";

r[i].οnclick=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;iif(r[i].type=="radio"||r[i].type=="checkbox"){if(r[i].checked==false){select_element(r[i],1)}}

}

}

}

}

CSS部分：

Copy to Clipboard

引用的内容：[www.veryhuo.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;}

其实原理很简单，就是让input透明度变为0，然后给input添加一个背景，当鼠标选择的时候，更换其背景为选中状态即可

稍做了一下改动，可以控制样式是否加载：

利用javascript自定义radio及checkbox样式

单选框样式：

男

女

boy

girl

复选框样式：

xhtml

CSS

Javascript

Flash

Ajax

AS

Flex

PHP/.NET/JSP

了解

一般

熟练

精通

资深专家

如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：http://www.veryhuo.com/

提示：可修改后代码再运行!