用CSS和JAVASCRIPT自定义单选按钮(仿XP按钮)资源-CSDN文库

共1个文件

htm：1个

CSS和JAVASCRIPT

单选按钮

(仿XP按钮)

3星 · 超过75%的资源需积分: 10 103 浏览量 2009-02-13 10:21:42 上传评论收藏 2KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

.rar （1个子文件）

自定义单选按钮.htm 5KB

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>自定义单选按钮</TITLE> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <SCRIPT type=text/javascript> function initARC(formId,onClassRadio,offClassRadio,onClassCheckbox,offClassCheckbox) { var agt=navigator.userAgent.toLowerCase(); this.major = parseInt(navigator.appVersion); this.ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1)); this.ie3 = (this.ie && (this.major < 4)); this.ie4 = (this.ie && (this.major == 4) && (agt.indexOf("msie 4")!=-1) ); this.iemac = (this.ie && (agt.indexOf("mac")!=-1)); if( !(this.iemac || ie3 || ie4) ){ customiseInputs(formId,onClassRadio,offClassRadio,onClassCheckbox,offClassCheckbox); } } function addLabelProperties(f){ if(typeof f.getElementsByTagName == 'undefined') return; var labels = f.getElementsByTagName("label"), label, elem, i = j = 0; while (label = labels[i++]){ if(typeof label.htmlFor == 'undefined') return; elem = document.getElementById(label.htmlFor); if(typeof elem == 'undefined'){ var inputs = label.getElementsByTagName("input"); if(inputs.length==0){ continue; } else { elem=inputs[0]; } } else if(typeof elem.label != 'undefined') { continue; } else if(typeof elem.length != 'undefined' && elem.length > 1 && elem.nodeName != 'Select'){ for(j=0; j<elem.length; j++){ elem.item(j).label = label; } } elem.label = label; } } function toggleLabelStyle(formId, label, onClass, offClass){ if(!document.getElementById || !label) return; var form = document.getElementById(formId); if(!form) return; if(label.htmlFor) { var e = document.getElementById(label.htmlFor); if(e.type=="checkbox"){ e.label.className = (e.label.className==onClass) ? offClass : onClass; e.checked = (e.label.className==onClass); } else if(e.type=="radio"){ var radioGroup = form.elements[e.name]; if(!radioGroup) return; for(var i=0; i<radioGroup.length; i++){ if(radioGroup[i].label){ radioGroup[i].label.className = ((radioGroup[i].checked=(radioGroup[i].id == e.id)) && radioGroup[i].label) ? onClass : offClass; } } } } } function customiseInputs(formId, onClassRadio, offClassRadio, onClassCheckbox, offClassCheckbox) { if(!document.getElementById) return; var prettyForm = document.getElementById(formId); if(!prettyForm) return; prettyForm.onreset = function() { customiseInputs(formId, onClassRadio, offClassRadio, onClassCheckbox, offClassCheckbox); } addLabelProperties(prettyForm); var inputs = prettyForm.getElementsByTagName('input'); for (var i=0; i < inputs.length; i++) { if( (inputs[i].type=="radio") && inputs[i].label && onClassRadio && offClassRadio){ inputs[i].style.position="absolute"; inputs[i].style.left = "-1000px"; inputs[i].label.className=offClassRadio; inputs[i].label.onclick = function (){ toggleLabelStyle(formId, this, onClassRadio, offClassRadio); return false; }; inputs[i].onclick = function (){ toggleLabelStyle(formId, this.label, onClassRadio, offClassRadio); }; if(inputs[i].defaultChecked || inputs[i].checked){ toggleLabelStyle(formId, inputs[i].label, onClassRadio, offClassRadio); } } } } window.onload = function(){ initARC('makeMeAPrettyForm','radioOn','radioOff'); } </SCRIPT> <STYLE type=text/css>.radioOff { PADDING-RIGHT: 2px; DISPLAY: inline; PADDING-LEFT: 20px; BACKGROUND: url(http://www.wanghao.org/attachments/month_0804/j2008425102955.gif) no-repeat 0% 50%; PADDING-BOTTOM: 2px; MARGIN: 0px; FONT: 0.8em/16px Verdana,Arial,Helvetica; COLOR: #666; PADDING-TOP: 2px } .radioOn { PADDING-RIGHT: 2px; DISPLAY: inline; PADDING-LEFT: 20px; BACKGROUND: url(http://www.wanghao.org/attachments/month_0804/12008425103020.gif) no-repeat 0% 50%; PADDING-BOTTOM: 2px; MARGIN: 0px; FONT: 0.8em/16px Verdana,Arial,Helvetica; COLOR: #000; PADDING-TOP: 2px } .radioOn:hover { BACKGROUND-IMAGE: url(http://www.wanghao.org/attachments/month_0804/62008425103026.gif) } .radioOff:hover { BACKGROUND-IMAGE: url(http://www.wanghao.org/attachments/month_0804/l2008425103011.gif); COLOR: #333! important } </STYLE> <META content="MSHTML 6.00.3790.3959" name=GENERATOR></HEAD> <BODY> <FORM id=makeMeAPrettyForm action=page method=get><INPUT id=a type=radio value=radiobutton name=radiobutton><LABEL for=a>1111</LABEL><BR><INPUT id=b type=radio value=radiobutton name=radiobutton><LABEL for=b>2222</LABEL> </FORM></BODY></HTML>

评论收藏

内容反馈