Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > ListBox > Apply Skin to Checkboxes

• Josh

  Posted on Jan 14, 2012 (permalink)

  Hello,
  
  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.
  
  Thanks

  Attached files

  • listbox-checkbox.png

  Reply

• jumpstart Master

  Posted on Jan 17, 2012 (permalink)

  Josh:
  
  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.
  
  Default.aspx:
  

  <telerik:RadListBox ID="RadListBox1" runat="server" Skin="Black" CheckBoxes="true" Width="200px"

      Height="300px">

      <items>

                  <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" />

              </items>

  </telerik:RadListBox>

   
  But, you can also fine tune the display of the checkbox and the text by applying CSS, as follows:
  
  

      <style type="text/css">

      .rlbText

      {

          background-color: #000000 !important;

      }

      .rlbCheck

      {

          border-style:solid;

          border-color: Red !important;

      }

   

  </style>

  
  You can reference the classes of the RadListBox on the CSS Skin File Selector documentation page.
  
  Hope this helps!
  

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > ListBox > Apply Skin to Checkboxes