
Most of us convince them that it will take too much time and cost-effective, where we can make it very easily within the small budget.
If you access any 10 websites contact page, you will see that there is only one or two websites using custom form elements to match with the page theme and design. Guys why we are not using custom form elements where we can implement it within few minutes.
Custom CheckBox
Custom Radio Button
Custom Select Box/ Dropdown
HTML Code:
<h2>Custom Checkbox</h2> <form method="post" action="#" name="custom-checkbox"> <input type="checkbox" name="check1" id="check1" class="add-style" /> <label for="check1">Custom Checkbox </label><br /> <input type="checkbox" name="check2" id="check2" class="add-style" /> <label for="check2">Custom Checkbox</label> <br /> <br /> <input type="checkbox" name="check3" id="check3" /> <label for="check3">Normal Checkbox </label><br /> <input type="checkbox" name="check4" id="check4" /> <label for="check4">Normal Checkbox</label> <br /> </form> <h2>Custom Radio</h2> <form method="post" action="#" name="custom-radio"> <input type="radio" name="radio1" id="radio1" value="radio1" class="add-style" /> <label for="radio1">Custom Radio Button</label><br /> <input type="radio" name="radio1" id="radio2" value="radio2" class="add-style" /> <label for="radio2">Custom Radio Button</label><br /> <br /> <input type="radio" name="radio3" id="radio3" value="radio1" /> <label for="radio3">Normal Radio Button</label><br /> <input type="radio" name="radio3" id="radio4" value="radio2" /> <label for="radio4">Normal Radio Button</label><br /> </form> <h2>Custom Radio</h2> <form method="post" action="#" name="custom-selectbox"> <select name="custom-dropdown" class="add-style"> <option value="1">24xhtml.com</option> <option value="2">Custom Dropdown</option> <option value="3">Custom Checkbox</option> <option value="4">Custom Radio</option> </select> <p><select name="select-box" style="width: 250px;"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> <option value="5">Option 5</option> </select></p> </form>Note: You can use all form elements in a single form.
CSS Code:
<style type="text/css"> .checkbox, .radio { width: 19px; height: 25px; padding: 0 5px 0 0; background: url(checkbox.png) no-repeat; display: block; clear: left; float: left; } .radio { background: url(radio.png) no-repeat; } .select { position: absolute; width: 218px; height: 30px; padding: 0 24px 0 8px; color: #fff; font: 12px/30px arial,sans-serif; background: url(select.png) no-repeat; overflow: hidden; } .custom-form label { line-height:25px;} </style>
JS Code:
<script type="text/javascript"> var checkbox_Height = "25"; var radio_Height = "25"; var select_Width = "250"; document.write('<style type="text/css">input.add-style { display: none; } select.add-style { position: relative; width: '+select_Width+"px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>");var Custom={init:function() {var e,t,i,o=document.getElementsByTagName("input"),s=Array(); for(a=0;a<o.length;a++)("checkbox"==o[a].type||"radio"==o[a].type)&&o[a] .className.indexOf("add-style")>-1&&(s[a]=document.createElement("span"),s[a] .className=o[a].type,1==o[a].checked&&("checkbox"==o[a].type? (position="0 -"+2*checkbox_Height+"px",s[a].style. backgroundPosition=position):(position="0 -"+2*radio_Height+"px",s[a].style. backgroundPosition=position)),o[a].parentNode.insertBefore(s[a],o[a]),o[a]. onchange=Custom.clear,o[a].getAttribute("disabled")?s[a].className=s[a]. className+=" disabled":(s[a].onmousedown=Custom.pushed,s[a] .onmouseup=Custom.check));for(o=document.getElementsByTagName("select"), a=0;a<o.length;a++)if(o[a].className.indexOf("add-style")>-1){for(t=o[a] .getElementsByTagName("option"),i=t[0].childNodes[0].nodeValue,e=document .createTextNode(i),b=0;b<t.length;b++)1==t[b].selected&&(e=document .createTextNode(t[b].childNodes[0].nodeValue));s[a]=document.createElement("span"), s[a].className="select",s[a].id="select"+o[a].name,s[a].appendChild(e),o[a] .parentNode.insertBefore(s[a],o[a]),o[a].getAttribute("disabled")?o[a] .previousSibling.className=o[a].previousSibling.className+=" disabled":o[a] .onchange=Custom.choose}document.onmouseup=Custom.clear},pushed:function() {element=this.nextSibling,this.style.backgroundPosition=1==element.checked&& "checkbox"==element.type?"0 -"+3*checkbox_Height+"px":1==element.checked&&"radio" ==element.type?"0 -"+3*radio_Height+"px":1!=element.checked&&"checkbox"==element. type?"0 -"+checkbox_Height+"px":"0 -"+radio_Height+"px"},check:function(){if (element=this.nextSibling,1==element.checked&&"checkbox"==element.type)this. style.backgroundPosition="0 0",element.checked=!1;else{if("checkbox"==element.type) this.style.backgroundPosition="0 -"+2*checkbox_Height+"px";else for(this.style. backgroundPosition="0 -"+2*radio_Height+"px",group=this.nextSibling.name,inputs= document.getElementsByTagName("input"),a=0;a<inputs.length;a++)inputs[a].name== group&&inputs[a]!=this.nextSibling&&(inputs[a].previousSibling.style. backgroundPosition="0 0");element.checked=!0}},clear:function() {inputs=document.getElementsByTagName("input");for(var a=0;a<inputs.length;a++) "checkbox"==inputs[a].type&&1==inputs[a].checked&&inputs[a].className.indexOf ("add-style")>-1?inputs[a].previousSibling.style.backgroundPosition="0 -"+2* checkbox_Height+"px":"checkbox"==inputs[a].type&&inputs[a].className.indexOf ("add-style")>-1?inputs[a].previousSibling.style.backgroundPosition="0 0": "radio"==inputs[a].type&&1==inputs[a].checked&&inputs[a].className.indexOf ("add-style")>-1?inputs[a].previousSibling.style.backgroundPosition="0 -" +2*radio_Height+"px":"radio"==inputs[a].type&&inputs[a].className.indexOf ("add-style")>-1&&(inputs[a].previousSibling.style.backgroundPosition="0 0")} ,choose:function(){for(option=this.getElementsByTagName("option"),d=0;d <option.length;d++)1==option[d].selected&&(document.getElementById("select"+this.name) .childNodes[0].nodeValue=option[d].childNodes[0].nodeValue)}};window.onload=Custom.init; </script>
Most of us convince them that it will take too much time and cost-effective, where we can make it very easily within the small budget. XK0-004 dumps
ReplyDeleteGreat Article. Thank you for sharing! Really an awesome post for every one.
ReplyDeleteProject Centers in Chennai
JavaScript Training in Chennai
Final Year Project Domains for IT
JavaScript Training in Chennai