Apply Skin to Checkboxes

4 posts, 0 answers
  1. Josh
    Josh avatar
    61 posts
    Member since:
    Dec 2009

    Posted 14 Jan 2012 Link to this post


    I am using a RadListBox with Checkboxes="true." I was wondering if it is possible to skin the checkboxes to the same skin as the listbox. I have a RadFormDecorator on the page which styles the regular asp checkboxes but the ones in the listbox remain un-styled. Currently using Q2 2011.

  2. Richard
    Richard avatar
    479 posts
    Member since:
    Nov 2011

    Posted 17 Jan 2012 Link to this post


    It appears that you can set a skin to the text that is displayed alongside the checkbox in the RadListBox. This is done by setting the
    SkinID="Black" property at design time.

    I did not find a way to set a skin for the checkbox itself.

    <telerik:RadListBox ID="RadListBox1" runat="server" Skin="Black" CheckBoxes="true" Width="200px"
                    <telerik:RadListBoxItem SkinID="Black" Text="Arts" />
                    <telerik:RadListBoxItem SkinID="Black" Text="Biographies" />
                    <telerik:RadListBoxItem SkinID="Black" Text="Children's Books" />
                    <telerik:RadListBoxItem SkinID="Black" Text="Computers � Internet" />
                    <telerik:RadListBoxItem SkinID="Black" Text="Cooking" />
                    <telerik:RadListBoxItem SkinID="Black" Text="History" />
                    <telerik:RadListBoxItem SkinID="Black" Text="Fiction" />
                    <telerik:RadListBoxItem SkinID="Black" Text="Mystery" />
                    <telerik:RadListBoxItem SkinID="Black" Text="Nonfiction" />
                    <telerik:RadListBoxItem SkinID="Black" Text="Romance" />
                    <telerik:RadListBoxItem SkinID="Black" Text="Science Fiction " />
                    <telerik:RadListBoxItem SkinID="Black" Text="Travel" />
    But, you can also fine tune the display of the checkbox and the text by applying CSS, as follows:

        <style type="text/css">
            background-color: #000000 !important;
            border-color: Red !important;

    You can reference the classes of the RadListBox on the CSS Skin File Selector documentation page.

    Hope this helps!
  3. Francis
    Francis avatar
    12 posts
    Member since:
    Jul 2012

    Posted 25 Jul 2012 Link to this post


    I'm using RadListBox and can't get the Web20 Skin to apply on my Checkboxes.
    Items are dynamically added at runtime.
    <telerik:RadListBox ID="lstObjCMC" runat="server"  Skin="Web20"
    EmptyMessage="Aucun objectif spécifié" Width="90%">

    lstObjCMC.Items.Add(new RadListBoxItem
        Value = o.idObjectif.ToString(),
        Text = o.noObjectif + " - "+o.objectif_t,
        ToolTip = o.objectif_t,
        Checked = checkedObjectifs.Contains(o.idObjectif),

    Also tried with the css solution but still no result.
    Any idea?
  4. Ivan Zhekov
    Ivan Zhekov avatar
    604 posts

    Posted 30 Jul 2012 Link to this post

    Hello, Francis.

    The RadFormDecorator can not decorate the inbuilt checkboxes of the listbox and that's per design.

    Yet, the idea is worth looking into and we'll see what we can do to achieve it.

    On your question:
    -- you could use checkboxes as templates and that will enable the RFD to skin them
    -- you could use a custom solution, say by wrapping the checkboxes in SPAN element, then hiding the chekbox (visibility: hidden) and then dispplaying a background image on the span element depending on the checked state of the combo.

    Ivan Zhekov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top