Documentation

Styling and Appearance

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file.

Below is the list of CSS classes used by jqxButtons.

jqxRadioButton Style
jqx-widget - applied to the jqxRadioButton widget.
jqx-radiobutton - applied to jqxRadioButton's outer div element.
jqx-radiobutton-default - applied to the check box when its state is default.
jqx-fill-state-normal - applied to the check box when its state is default.
jqx-radiobutton-hover - applied to the check box when the mouse cursor is over it
jqx-fill-state-hover - applied to the check box when the mouse cursor is over it
jqx-radiobutton-disabled -applied to the check box when the widget is disabled
jqx-radiobutton-disabled-box - applied to the check's box when the jqxRadioButton is disabled.
jqx-radiobutton-check-checked - applied to the check's box when the jqxRadioButton is checked. Displays a check icon
jqx-radiobutton-check-disabled - applied to the check's box when the jqxRadioButton is disabled. Displays a disabled check icon
jqx-radiobutton-check-indeterminate - applied to the check's box when the jqxRadioButton is in indeterminate state. Displays a rectangle inside the check's box.
jqx-radiobutton-check-indeterminate-disabled - applied to the check's box when the jqxradiobutton is in indeterminate state and the jqxRadioButton is disabled. Displays a gray(disabled) rectangle inside the check's box.
jqx-fill-state-disabled - applied to the jqxRadioButton when it is disabled.
jqx-fill-state-focus - applied to the jqxRadioButton when it is focused.

When you create a custom style with colors and backgrounds for jqxRadioButton, you need to do the following:

Add the above CSS classes related to jqxRadioButton
After each CSS class, add your theme name.
For example:
jqx-radiobutton-summer
To apply your custom style to jqxRadioButton, you need to set its 'theme' property(option) to point to your theme name string.
```
$("#jqxradiobutton").jqxRadioButton({ theme: 'summer', width: 120, height: 25 });
```

The sample below demonstrates how to set the 'Summer' theme to jqxRadioButton.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>jQuery Radio Button CSS Styling Sample</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // create jqxRadioButton.
            $("#jqxradiobutton1").jqxRadioButton({theme: 'summer', width: 120, height: 25 });
            $("#jqxradiobutton2").jqxRadioButton({ theme: 'summer', width: 120, height: 25 });
        });
    </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body class='default'>
    <div id='jqxradiobutton1'>
        Radio Button 1</div>
    <div id='jqxradiobutton2'>
        Radio Button 2</div>
</body>
</html>

Documentation

Styling and Appearance

jqxRadioButton Style