Tag Archives: custom radiobuttons

Acid.JS Component Library 3.7 is Out With 1 Update and New Website

The new version of Acid.JS has just been released with one update * – version 2.0 of GuestBook.XML – an AJAX instant feedback component. I am also happy to announce the new website of the libary as well, so make sure you update your links.

* A couple of outdated components have been discontinued, and they are no longer shipped with Acid.JS – AJAX Photo Gallery, CSS Watermark, Antipixel Buttons.XML, Upload.XML, Skinnable Browser Dialogs and Page Announcement.XML.

Acid.JS Web 2.0 Component Library 3.6 is Out With 3 Updates

The new version of Acid.JS has just been released with three major component updates – AJAX Hotel Reservation Form 3.0, Web 2.0 AJAX Loading Panel 3.0 and Rounded Corners Panel 2.0.

Click here to view the release notes for the latest version.

Acid.JS Web 2.0 Component Library 3.5 is Out

The new version of Acid.JS has just been released with 2 new components – Acid.RSS and EULA.XML, updated versions of CheckBox.XML and RadioButton.XML.

Click here to view the release notes for the latest version.

Acid.JS JavaScript Library 3.4 Released with 5 New Scripts

Get most of the website widgets and tools I’m developing in a single package that is regularly updated. Whenever a new script or script update is available, it will be included in the download file. To stay informed and up-to-date with Acid.JS, please, subscribe to my RSS feed.

Using CSS to Style Radiobuttons and Checkboxes in Safari and Chrome

A newer and better crossbrowser solution for custom checkbox and radio button styling is available on this page.

The full example for this blogpost is available for download at this link. You can play with the online demo on this page.

WebKit browsers (Safari, Chrome, Konqueror) have vendor-specific implementation of the CSS appearance property, as well as full support for the :checked and :disabled pseudo classes. The property is called -khtml-appearance and it’s default value is visual. When set to none, it turns the specified control(s) to a blank slate, and this, combined with :checked, :hover and :disabled facilitates any styling of checkboxes and radiobuttons without JavaScript or complex layout tricks. All we need is a sprite that contains all possible states (checked, unchecked, hover) of checkboxes and radiobuttons and as few as 50 lines of CSS:

1. The image sprite

RadioAndCheckBoxSprite

2. The HTML:

<ul>
    <li>
        <input type="checkbox" id="CheckBox1" checked="checked" />
        <label for="CheckBox1">Checkbox 1</label>
    </li>
    <li>
        <input type="checkbox" id="CheckBox2" />
        <label for="CheckBox2">Checkbox 2</label>
    </li>
    <li>
        <input type="checkbox" id="CheckBox3" disabled="disabled" />
        <label for="CheckBox3">Checkbox 2</label>
    </li>
</ul>
<ul>
    <li>
        <input type="radio" id="Radio1" checked="checked" name="radio" />
        <label for="Radio1">Radio 1</label>
    </li>
    <li>
        <input type="radio" id="Radio2" name="radio" />
        <label for="Radio2">Radio 2</label>
    </li>
    <li>
        <input type="radio" id="Radio3" name="radio" disabled="disabled" />
        <label for="Radio3">Radio 2</label>
    </li>
</ul>

3. And the CSS, where we make use of attribute selectors, pseudo classes, and of course -khtml-appearance set to none:

label
{
 font: normal 12px/20px Arial, Sans-serif;
 color: black;
 vertical-align: middle;
}
/* common settings checkbox and radiobutton */
input[type="checkbox"],
input[type="radio"]
{
 -khtml-appearance: none;
 background: url('RadioAndCheckBoxSprite.gif') no-repeat;
 width: 20px;
 height: 20px;
 vertical-align: middle;
}
input[type="checkbox"]
{
 background-position-x: left;
}
input[type="radio"]
{
 background-position-x: right;
}
input[type="checkbox"]:hover,
input[type="radio"]:hover
{
 background-position-y: -40px;
}
input[type="checkbox"]:checked,
input[type="radio"]:checked
{
 background-position-y: -20px;
}
input[type="checkbox"]:checked:hover,
input[type="radio"]:checked:hover
{
 background-position-y: -60px;
}
/* disabled settings for checkbox and radiobutton */
input[type="radio"]:disabled,
input[type="checkbox"]:disabled
{
 opacity: .3;
}

FireFox has a similar implementation of the property called -moz-appearance, however its default value is none, and at present the above approach cannot be used for any browser but Safari and Google Chrome.

The full example is available for download at this link. You can play with the online demo on this page.

You may also be interested in the following scripts that take control on the visual appearance of other form elements.

Find more experiments here.