Styling checkbox and radio button with CSS and Javascript

I want to style the form elements such as radio button, checkbox or selection list. Google shows me a very good tutorial written by Ryan Fait.
Las Vegas Web Design – Checkboxes, Radio Buttons, Select Lists, Custom HTML Form Elements

In the above tutorial, those form elements will be replaced by a span element. It works great. Only 1 minor problem which is those span elements could not align well. So i made some change on the CSS. Here is my example.

1. Download the custom-form-elements.js file @ Las Vegas Web Design (Click the Download the full script link)
 

2. Download the radio.png, checkbox.png and select.png

checkbox
radio
select

 

3. Put the above files in your website webroot folder and create the index.html and style.css

 

4. Edit the index.html as follow

<html>
  <head>
    <script type="text/javascript" src="custom-form-elements.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <h3>Raio buttons</h3>
    <input type="radio" name="radios" class="styled" value="yes" />Yes
    <input type="radio" name="radios" class="styled" value="no" />No
    <h3>Checkboxes</h3>
    <input type="checkbox" class="styled" /><label>Yes</label>
    <input type="checkbox" class="styled" /><label>No</label>
    <h3>Selection list</h3>
    <select class="styled">
      <option value="yes">Yes</option>
      <option value="no">No</option>
    </select>
  </body>
</html>

 

5. Edit the style.css as follow

.checkbox, .radio {
  width: 19px;
  height: 25px;
  padding: 1px 20px 0 0; /* modify this value for different width of radio.png/checkbox.png */
  background: url(checkbox.png) no-repeat;
  /* Remove the float: left style
  display: block;
  clear: left;
  float: left;
  */
}
.radio {
  background: url(radio.png) no-repeat;
}
.select {
  position: absolute;
  width: 158px;
  height: 21px;
  padding: 0 24px 0 8px;
  color: #fff;
  font: 12px/21px arial,sans-serif;
  background: url(select.png) no-repeat;
  overflow: hidden;
}

 

6. Check it out

 

In order to have your own radio button and checkbox, you can create the radio.png/checkbox.png with fixed height for each buttons states. In this example, the radio.png/checkbox.png has 100px height which means the button height should be 25px. If you have large button size, change the following values in the custom-form-elements.js.

...
var checkboxHeight = "25";
var radioHeight = "25";
var selectWidth = "190";
...

 

Done =)

Reference: Las Vegas Web Design - Checkboxes, Radio Buttons, Select Lists, Custom HTML Form Elements

About these ads

One thought on “Styling checkbox and radio button with CSS and Javascript

  1. Pingback: Drupal 7 – Styling checkbox and radio button in Webform | Eureka!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s