<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>NetWaver &#187; custom form elements</title>
	<atom:link href="http://www.netwaver.com/tag/custom-form-elements/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.netwaver.com</link>
	<description>Best Free Web Developer Resources From The Past &#38; In The Present</description>
	<lastBuildDate>Wed, 29 Jul 2009 01:34:03 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>24 HTML Form Elements Customization Techniques</title>
		<link>http://www.netwaver.com/23/24-html-form-elements-customization-techniques/</link>
		<comments>http://www.netwaver.com/23/24-html-form-elements-customization-techniques/#comments</comments>
		<pubDate>Fri, 17 Apr 2009 10:51:28 +0000</pubDate>
		<dc:creator>NetWaver</dc:creator>
				<category><![CDATA[Forms]]></category>
		<category><![CDATA[JavaScript & AJAX]]></category>
		<category><![CDATA[XHTML & CSS]]></category>
		<category><![CDATA[custom checkbox]]></category>
		<category><![CDATA[custom checkboxes]]></category>
		<category><![CDATA[custom form elements]]></category>
		<category><![CDATA[custom radio buttons]]></category>
		<category><![CDATA[fancyform]]></category>
		<category><![CDATA[jnice]]></category>
		<category><![CDATA[niceforms]]></category>
		<category><![CDATA[radio input replacement]]></category>
		<category><![CDATA[select replacement]]></category>
		<category><![CDATA[styled form elements]]></category>

		<guid isPermaLink="false">http://www.netwaver.com/?p=23</guid>
		<description><![CDATA[HTML form elements do not render consistently across all browsers. While some form elements such as textbox and textarea can be styled through CSS to look the same on most browsers, others are ugly enough which can&#8217;t be ruled by CSS. Here are 24 solutions you can use to customize your form elements.
Checkbox and Radio [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: justify;">HTML form elements do not render consistently across all browsers. While some form elements such as textbox and textarea can be styled through CSS to look the same on most browsers, others are ugly enough which can&#8217;t be ruled by CSS. Here are 24 solutions you can use to customize your form elements.</p>
<h3><strong>Checkbox and Radio Buttons</strong></h3>
<h5>1.) <a href="http://lipidity.com/fancy-form/" target="_blank">FancyForm</a></h5>
<p>FancyForm is a powerful replacement script used to provide the ultimate flexibility in changing the appearance and function of checkbox and radio buttons form elements. It&#8217;s accessible, easy to use and degrades gracefully on all older, non-supporting browsers. It requires MooTools JavaScript framework. <a href="http://lipidity.com/fancy-form/" target="_blank"><img title="fancyform" src="http://www.netwaver.com/wp-content/uploads/fancyform.gif" alt="fancyform" width="585" height="188" /></a><span id="more-23"></span></p>
<h5>2.) <a href="http://chriserwin.com/scripts/crir/" target="_blank">CRIR: Checkbox &amp; Radio Input Replacement</a></h5>
<p>This combination of JavaScript and CSS will hide checkbox and radio buttons. This will allow you to style the label however you wish using CSS, and the actual input control will be hidden. The form will still collect data as it normally would because the label itself will trigger the hidden input control. The form is still fully functional if JavaScript is disabled or not supported. <a href="http://chriserwin.com/scripts/crir/" target="_blank"><img title="crir" src="http://www.netwaver.com/wp-content/uploads/crir.gif" alt="crir" width="585" height="115" /></a></p>
<h5>3.) <a href="http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/" target="_blank">Ryan Fait&#8217;s Custom Checkboxes &amp; Radio Buttons</a></h5>
<p>This JavaScript and CSS will allow you to use custom images for checkboxes, radio buttons and select lists. The unobtrusive script gracefully degrades, so if JavaScript is disabled, normal form input objects appear instead of your customized elements. <a href="http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/" target="_blank"><img title="ryanfait" src="http://www.netwaver.com/wp-content/uploads/ryanfait.gif" alt="ryanfait" width="585" height="112" /></a></p>
<h5>4.) <a href="http://www.flog.co.nz/journal/arc-adams-radiocheckbox-customisation/" target="_blank">ARC &#8211; Adam’s Radio/Checkbox Customization</a></h5>
<p>The script parses a specified form for input types and associated labels. If the input type is found to be a radio button or checkbox then the widget is hidden and the label is altered to display a custom widget-style-image by modifying the label’s CSS style. <a href="http://www.flog.co.nz/journal/arc-adams-radiocheckbox-customisation/" target="_blank"><img class="alignnone size-full wp-image-180" title="arc" src="http://www.netwaver.com/wp-content/uploads/arc.gif" alt="arc" width="585" height="98" /></a></p>
<h5>5.) <a href="http://www.no-margin-for-errors.com/projects/prettyCheckboxes/" target="_blank">prettyCheckboxes</a></h5>
<p><a href="http://www.no-margin-for-errors.com/projects/prettyCheckboxes/" target="_blank"><img class="alignnone size-full wp-image-181" title="prettycheckboxes" src="http://www.netwaver.com/wp-content/uploads/prettycheckboxes.gif" alt="prettycheckboxes" width="585" height="136" /></a></p>
<h5>6.) <a href="http://widowmaker.kiev.ua/checkbox/" target="_blank">jQuery checkbox</a></h5>
<h5><a href="http://widowmaker.kiev.ua/checkbox/"><img class="alignnone size-full wp-image-182" title="jquerycheckbox" src="http://www.netwaver.com/wp-content/uploads/jquerycheckbox.gif" alt="jquerycheckbox" width="585" height="94" /></a></h5>
<h5>7.) Articles &amp; Tutorials On Customizing Checkbox and Radio Buttons</h5>
<ul>
<li><a href="http://www.cjscreativemall.com/js/custom-radio-button-implement-with-jqurey-part-ii/" target="_blank">Custom Radio Button Implement With jQuery</a></li>
<li><a href="http://slayeroffice.com/code/custom_checkbox/" target="_blank">slayeroffice Custom Checkbox Elements</a></li>
<li><a href="http://www.dailycoding.com/Posts/customized_html_controls_creating_custom_checkbox.aspx" target="_blank">Customized Html Controls: Creating Custom Checkbox</a></li>
<li><a href="http://www.dxdec.com/wod/formstyle/index.html" target="_blank">Styled Form Controls</a></li>
<li><a href="http://www.maratz.com/blog/archives/2006/06/11/fancy-checkboxes-and-radio-buttons/" target="_blank">Fancy Checkboxes and Radio Buttons</a></li>
<li><a href="http://www.insidedhtml.com/tips/elements/ts19/page1.asp" target="_blank">Inside Technique : Custom Checkboxes</a></li>
</ul>
<h3><strong></strong><strong>Select / Dropdown Box</strong></h3>
<h5>1.) <a href="http://marghoobsuleman.com/jquery-image-dropdown" target="_blank">JavaScript Image Combobox</a></h5>
<p><a href="http://marghoobsuleman.com/jquery-image-dropdown" target="_blank"><img class="alignnone size-full wp-image-188" title="imagecombobox1" src="http://www.netwaver.com/wp-content/uploads/imagecombobox1.gif" alt="imagecombobox1" width="450" height="149" /></a></p>
<h5>2.) <a href="http://dropdown-check-list.googlecode.com/svn/trunk/demo.html" target="_blank">jQuery Dropdown Check List</a></h5>
<p><a href="http://dropdown-check-list.googlecode.com/svn/trunk/demo.html" target="_blank"><img class="alignnone size-full wp-image-189" title="jquerydropdownchecklist1" src="http://www.netwaver.com/wp-content/uploads/jquerydropdownchecklist1.gif" alt="jquerydropdownchecklist1" width="450" height="214" /></a></p>
<h5>3.) <a href="http://www.adelaidewebdesigns.com/2008/08/01/adelaide-web-designs-releases-customselect-with-icons/" target="_blank">Custom Select With Icons</a></h5>
<p><a href="http://www.adelaidewebdesigns.com/2008/08/01/adelaide-web-designs-releases-customselect-with-icons/" target="_blank"><img class="alignnone size-full wp-image-190" title="customselect" src="http://www.netwaver.com/wp-content/uploads/customselect.gif" alt="customselect" width="450" height="131" /></a></p>
<h5>4.) <a href="http://ergosign.de/blog/2009/03/18/style-your-html-comboboxes-using-mootools/" target="_blank">ComboBoxes Using MooTools</a></h5>
<p><a href="http://ergosign.de/blog/2009/03/18/style-your-html-comboboxes-using-mootools/" target="_blank"><img class="alignnone size-full wp-image-191" title="mootoolscombo" src="http://www.netwaver.com/wp-content/uploads/mootoolscombo.gif" alt="mootoolscombo" width="450" height="131" /></a></p>
<h5>5.) <a href="http://v2.easy-designs.net/articles/replaceSelect/" target="_blank">Select Replacement</a></h5>
<p><a href="http://v2.easy-designs.net/articles/replaceSelect/" target="_blank"><img class="alignnone size-full wp-image-192" title="select-replacement" src="http://www.netwaver.com/wp-content/uploads/select-replacement.gif" alt="select-replacement" width="450" height="131" /></a></p>
<h5>6.) Additional Select Box Customization (<span style="color: #ff0000;"><em>Won&#8217;t Work If JavaScript Disabled</em></span>)</h5>
<ul>
<li><a href="http://www.givainc.com/labs/mcdropdown_jquery_plugin.htm" target="_blank">mcDropdown jQuery Plug-in</a></li>
<li><a href="http://brilliantretail.com/cases/select/" target="_blank">jQuery Custom Select Box v.0.01</a></li>
<li><a href="http://lab.arc90.com/2007/07/multiselect.php" target="_blank">Arc90 Arc90</a></li>
<li><a href="http://livepipe.net/control/selectmultiple" target="_blank">Control.SelectMultiple</a></li>
</ul>
<h3><strong>Almost All Form Elements</strong></h3>
<h5>1.) <a href="http://customformelements.net/" target="_blank">Custom Form Elements (CFE)</a></h5>
<p>Custom Form Elements unites all efforts in the web to enhance web-based XHTML forms in terms of style, usability and accessibility by using Javascript and/or CSS. Custom Form Elements work cross-browser, currently supporting most A-grade browsers.<a href="http://customformelements.net/" target="_blank"><img class="alignnone size-full wp-image-183" title="cfe" src="http://www.netwaver.com/wp-content/uploads/cfe.gif" alt="cfe" width="585" height="127" /></a></p>
<h5>2.) <a href="http://www.emblematiq.com/projects/niceforms/" target="_blank">Emblematiq Niceforms</a></h5>
<p>Niceforms is a script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can even develop your own look with minimal effort. <a href="http://www.emblematiq.com/projects/niceforms/"><img class="alignnone size-full wp-image-184" title="niceforms" src="http://www.netwaver.com/wp-content/uploads/niceforms.gif" alt="niceforms" width="585" height="178" /></a></p>
<h5>3.) <a href="http://plugins.jquery.com/project/jNice" target="_blank">jQuery Plugin: jNice</a></h5>
<p><a href="http://plugins.jquery.com/project/jNice" target="_blank"><img class="alignnone size-full wp-image-185" title="jnice" src="http://www.netwaver.com/wp-content/uploads/jnice.gif" alt="jnice" width="585" height="105" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.netwaver.com/23/24-html-form-elements-customization-techniques/feed/</wfw:commentRss>
		<slash:comments>34</slash:comments>
		</item>
	</channel>
</rss>
