Using jQuery To Customize Form Elements
Posted in: How-To
During our new post we are going to address the issue of customizing some of the elements which cannot be stylized using plain CSS. Instead, you can use jQuery Plug-Ins. Here, in Saturized Studio, the designers are all about details; every element of a web page is approached with utmost dedication. Whether it is a Check Box, Select Box, or simply a Radio Button, it doesn’t matter. Everything has to be perfectly synchronized with the atmosphere of the entire web site.
As was stated previously, these, and other elements cannot be achieved simply by using CSS, because different browsers have different methods of rendering:
for selectboxes http://www.456bereastreet.com/lab/form_controls/select
for checkboxes/radiobuttons http://swatelier.info/at/forms/checkBox.htm Insanitarium the movie
The only way to achieve the Crossbrowser look is using JavaScript. There is a number of Java Scripts you can use to deal with these problems, but we will mention only the ones easiest to use, and which, in our opinion, show best results.
Styling Select Boxes
For styling select boxes, we choose jQuery.Selectbox 0.5. It’s easy to use, with only a few lines of JS code, and without major changes in HTML code.
Usage
First you need to include the necessary files in the <head> segment:
<link rel="stylesheet" type="text/css"href="selectbox.css"/> <script type="text/javascript" src="jquery.latest.js"></script> <script type="text/javascript" src="jquery.selectbox-0.5.js"></script>
The standard code for select box in the <body> segment:
Furthermore, you need to assign a specific ‘id’ or ‘class’ to a selectbox, which we can then use as a selector for connecting the selectbox script.
When you want to recall the script (or in this case an ‘id’ with a value of ‘myselectbox’) you can do the following:
In the <head> segment, below other JS ‘includes’
Bicentennial Man psp <script type="text/javascript"> $(document).ready(function() { $('#myselectbox').selectbox({debug: true}); }); </script>
This way we assigned to our selectbox, in just a few easy steps, everything it needs to make the customization possible. The final operation would be to define the look of the selectbox itself, using file ‘selectbox.css’, in which we can set up wanted dimensions, font style and a background image:
div.selectbox-wrapper {
position:absolute;
width:222px;
background-color:white;
border:1px solid #ccc;
margin:0px;
margin-top:-10px;
padding:0px;
font-size:0.8em;
text-align:left;
max-height:200px;
overflow:auto;}
div.selectbox-wrapper ul {
list-style-type:none;
margin:0px;
padding:0px;}
div.selectbox-wrapper ul li.selected {
background-color: #EAF2FB;}
div.selectbox-wrapper ul li.current {
background-color: #CDD8E4;}
div.selectbox-wrapper ul li {
list-style-type:none;
display:block;
margin:0;
padding:2px;
cursor:pointer;}
label {
display: block;}
.selectbox /* look&fell of select box*/{
margin: 0px 5px 10px 0px;
padding-left:2px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
width : 222px;
display : block;
text-align:left;
background:url(bg_select.gif) 0 0 no-repeat;
height:18px;
cursor: pointer;
border:0;
color:#333;}
Johnson Family Dinner dvdrip You can find the download and other documents for jQuery.Selectbox 0.5 on the author’s site.
Other solutions for selectbox styling:
http://www.glanzani.com.ar/select/ (based on Prototype/Scriptaculous)
http://maveno.us/library/public/mavselectbox (based on MooTools)
Styling Checkboxes / Radiobuttons
When it comes to checkboxes or radiobuttons, a great solution would be jQuery UI Checkbox. Using this plug-in means using some powerful jquery selectors and css sprites images – we can determine the looks of every checkbox and radiobutton on any web page we are working on.
Usage Inserting the necessary scripts in the <head> segment:
Ghost Month psp <link rel="stylesheet" type="text/css"href="checkbox.css" /> <script type="text/javascript" src="jquery.latest.js"></script> <script type="text/javascript" src="ui.core.js"></script> <script type="text/javascript" src="jquery.bind.js"></script> <script type="text/javascript" src="ui.checkbox.js"></script>
The structure of html code for checkboxes and radiobuttons remains unchanged:
<input id="c1" type="checkbox"/> <input name="radio" id="c2" type="radio"/>
Take download In the end, below the included js scripts in the <head> segment add:
<script type="text/javascript">
$(document).ready(function() {
$('input').checkBox();
});
</script>
This way we enabled our checkboxes and radiobuttons for customization.
The following steps are related to defining styles in the ‘checkbox.css’ file, through checkbox (span.ui-checkbox) and radiobutton (span.ui-radio) classes:
.ui-helper-hidden-accessible {
position: absolute;
left: -999em;}
.ui-radio-state-disabled,
.ui-radio-state-checked-disabled,
.ui-radio-state-disabled-hover,
.ui-radio-state-checked-disabled-hover {
color: #999;}
span.ui-checkbox,
span.ui-radio {
display: block;
float: left;
width: 16px;
height: 16px;
background: url(icon_checkbox.png) 0 -40px no-repeat;}
span.ui-helper-hidden {
display: none;}
label {
padding: 2px;}
span.ui-radio-state-hover,
span.ui-checkbox-state-hover {
background-position: 0 -114px;}
span.ui-checkbox-state-checked {
background-position: 0 -1px;}
span.ui-checkbox-state-checked-hover {
background-position: 0 -75px;}
span.ui-radio-state-checked-disabled-hover,
span.ui-radio-state-checked-disabled,
span.ui-radio-state-checked {
background-position: 0 -161px;}
span.ui-radio-state-checked-hover {
background-position: 0 -200px;}
The simple use of css sprites allows us to use only one image to define Default, Over and Checked status (in this case ‘icon_checkbox.png’). If you still don’t use, or are not familiar with ‘css sprites’, read the article from the Smashing Magazine
‘The Mystery Of CSS Sprites: Techniques, Tools And Tutorials’
The examples and downloads for jQuery UI Checkbox Dead End ipod can be found on:
http://www.protofunc.com/scripts/jquery/checkbox-radiobutton
Other solutions for checkbox/radiobutton styling:
FancyForm – (based on MooTools)
Conclusion
Constant demands for high level of quality both in design and the final html/css code, pose a challenge to front-end developer to constantly upgrade and perfect the quality of his work. This is when the use of these kinds of solutions starts being a daily routine in your work. Thanks to powerful and easy-to-use jQuery js library, the time needed to deal with these and similar problems is down to a minimum, and the final product is a clean and crossbrowser compatible html/css code.
