How to create custom form elements?

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 Checkbox
Custom Checkbox

Normal Checkbox
Normal Checkbox

Custom Radio Button

Custom Radio Button
Custom Radio Button

Normal Radio Button
Normal Radio Button

Custom Select Box/ Dropdown

24xhtml.com Custom Dropdown Custom Checkbox Custom Radio

24xhtml.com Custom Dropdown Custom Checkbox Custom Radio

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>