Screw Default Buttons version 1

Replace the browser defaults for radio buttons and checkboxes with your own custom design.

Screw Default Buttons version 1.2.3

ScrewDefaultButtons is a simple jQuery plugin allowing you to replace the browser defaults for radio buttons and checkboxes with your own custom design (image).

Made by Matt Solano

Using version 2 is recommended.


1 - Link

After downloading the plugin, link to both the jQuery library as well as the ScrewDefaultButtons plugin. You may do this by placing the following lines in the head of your HTML document:

2 - Run

Apply the .screwDefaultButtons() method to your radio buttons and/or checkboxes (Note: Must use separate calls). Here is where you will define your replacement images with their height and width. Below is an example:

3 - Style

To add things like margin and positioning, you may use the classes .styledRadio and .styledCheckbox in your own css. The following is an example of how it may look:

Preselected Buttons

The 'checked' attribute indicates that a input should be preselected when the page loads. ScrewDefaultButtons will recognize this and make sure your custom radio buttons and checkboxes are also preselected.

Disabled Buttons

Custom radio buttons and checkboxes may be disabled by default. In order to do this, you must also specify the disabled version and/or disabled-checked version(when the button is selected and disabled by default). Then, you may apply the disabled attribute as usual in your HTML.

Labels with 'for'

Form labels may be given the 'for' attribute, associating it with an input having a matching id. Feel free to continue doing this as ScrewDefaultButtons will work in the same way.

Inherits 'class' and 'onclick'

Due to popular demand, ScrewDefaultButtons now inherits class and onclick attributes applied to the radio buttons and checkboxes in your HTML. This can be used for both styling as well as ensuring that any events you may have created are still triggered.

Created by Matt Solano. This is outdated so use version 2 instead.

Return to projects