Web Tutorial: jQuery Tools for Customizing Form Elements

Are you searching for quick and easy jQuery tools for customizing form elements?

For any web designer, form elements such as input boxes, select boxes, radio buttons and checkboxes can be a real headache. They are typically the most difficult aspect of a base theme to style consistently across all browsers and platforms. Most browsers handle form fields in their own special way with their own base styling. The default skin applied to radio buttons and checkboxes can be almost impossible to override and can cause major issues with general usability in browsers like Internet Explorer. However, designers enjoy highly customized form elements, typically seen on checkout and contact forms, which match other base elements in the theme. In this tutorial, we will review two jQuery-based tools that can be utilized to achieve custom styling on the most difficult form elements to style.

 

 

Utilizing ezMark for Checkboxes and Radio Buttons

The jQuery plugin ezMark is both easy to integrate and fully compatible across all browsers (including Internet Explorer 6-8). Installation steps can be found here and all files can be downloaded from Github. The basic steps for using this tool are as follows:

Step One – Include jQuery and the base ezMark script into the <head> of your site.

<!-- Add jQuery either locally from your server or by linking 
directly to the latest version -->
<script type="text/javascript" language="Javascript" src="jquery.js">
</script>
<!-- Add the ezMark base script. Ensure the path to your 
script files is accurate. -->
<script type="text/javascript" language="Javascript" src="jquery.ezmark.js">
</script>

 

Step Two – Target desired checkbox and radio buttons. These can be highly targeted to a specific form or can be more general selectors to impact all elements on the site. This script targeting can be added directly to the page in <script> tags or in a separate document that is loaded.

<!-- Globally target all input fields by using the 
selector below. -->
$('input').ezMark();
<!-- Target more specific elements on the page with the following lines 
of code. Notice there are special selectors for radio and checkbox fields. -->
$('input[type="checkbox"]').ezMark();
$('input[type="radio"]').ezMark();

 

Step Three – Target new elements with CSS styles. These styles can be included with the rest of your theme styling.

<!-- Example CSS styling for a checkbox with ezMark applied. -->
.ez-checkbox {
background: url(../images/checkout_checkbox.png) no-repeat 0 0;
display: block;
float: left;
height: 28px;
margin-right: 1em;
margin-top: -4px;
width: 28px;
}
.ez-checkbox input {
padding:5px;
display:inline-block;
width:30px;
height:28px;
#display:inline;
#zoom:1;
}
.ez-checkbox.ez-checked {
background: url(../images/checkout_checkbox.png) no-repeat 0 -54px;
margin-top:-6px;
}
.ez-hide {
opacity:0;
width:100%;
height:100%;
filter:alpha(opacity=0);
}

The script wraps the selected radio and checkbox elements in an extra <div> tag and the actual input is hidden. Once the object is hidden, a background image is applied to the wrapping <div>. With a little CSS, this new <div> is given an on and off background state. See the example image to the right. This method completely eliminates the default browser object and provides the designer full control.

 

Custom Select Boxes with jQuery customSelect

The second tool is as easy as the first to install and configure. The main integration instructions can be found here and the full code can also be found on Github. Similar to the ezMark plugin, the customSelect involved three simple steps.

Step One – Call jQuery and the main customSelect script into the <head> of your site. There is no need to include the jQuery library twice if it has already been included with ezMark.

<!-- Include the direct path to the base customSelect
script and to the jQuery library if you haven't already
done so. -->
<script src='js/customSelect.jquery.js'></script>

 

Step Two – Target your select boxes with some additional JavaScript. Again, this can be included within <script> tags directly on the page or inside a separate document.

<!-- This line will apply the customSelect globally to
all of the selectboxes on the page. -->
$('select').customSelect();

 

Step Three – Add styling in your theme CSS for your new select boxes. Keep in mind that you will need to target the element on its hover, open and focus states. The plugin provides you with classes for each state. See code below as an example:

<!-- Example styling for all phases of the customSelect. -->
.customSelect, .customSelect.changed, .customSelectFocus, .customSelectOpen {
padding:0.7em 2.2em 0.7em 0.7em;
color:#848484;
font-size:1.4em;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.customSelect, .customSelect.changed {
background:url(../images/selectbox-default-extend.jpg) no-repeat right center #FFFFFF;
border:1px solid #E3E3E3;
}
.customSelectFocus, .customSelectOpen {
border:1px solid #798593;
background:url(../images/selectbox-active-extend.jpg) no-repeat right center #FFFFFF;
}

This jQuery plugin also hides the base element that typically pulls base browser treatments. Directly under the targeted element, the script provides a new <span> tag that allows for the user to add borders, background, and padding to the element to achieve styling not typically seen for a select box.

 

Drawbacks & Bugs

While both of these tools are fully functional on all browsers and platforms, there are some issues that may occur. Integrating these custom form tools with other JavaScript could complicate things. For example, if an expandable form is using JavaScript to hide on page load, the customSelect tool is unable to calculate the appropriate sizing for the hidden select box. This can cause alignment and sizing issues on the customSelect when the form is expanded. Another small issue that has been experienced is the ability to “reset” the value of a select box. This issue has been resolved with some additional code. AJAX can also cause issues if a page does not reload to style new form elements. Typically, a “$( document ).ajaxComplete” can solve this issue – see code example below. While some issues can occur while using these script tools, the majority of them can be solved very easily.

<!-- Utilizing ajaxComplete to initialize ezMark -->
jQuery(document).ajaxComplete(function(){
// New Checkbox
jQuery('input[type="checkbox"]').ezMark();
// New Radio
jQuery('input[type="radio"]').ezMark();
});

When considering whether to utilize these custom form scripts, the rewards significantly outweigh the risks. After implementation, designers will have full control over form elements that were near impossible to customize before. Both tools are light-weight and will have no impact on site performance or load times. Styling these elements will give any site design that detailed touch and make campaign and checkout forms stand out.

If you have any questions with integrating these plugins into your site or any questions about web design and development, our team is eager to start a discussion. Contact us today