Time has changed now, customers are more familiar with web design and they want similar design on every element of web pages. It’s really a good thing that customers are aware about design of each element.
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>
No comments:
Post a Comment