How Add Images to CheckBox

[JeffSM]

We see an space in check box that could have an 16x16 icon.

[JeffSM]

I just open the ticket to show my solution.

Whould be great if it had a property ImgUrl, but, here is my code.

 

<style type="text/css">
    .picCheckBox { display:block; }
    .picOfCheckBox { position: fixed; margin-top: -26px; margin-left: 18px;}
</style>

 <div style="display: block; width: 100%;">
  <telerik:RadCheckBox Checked="false" CssClass="picCheckBox" ID="chk1" runat="server" Text="Some text" />
                                    <img class="picOfCheckBox" title="opo" src="16.png" alt="opnc" width="16" height="16" />
                                  </div>
                                    <div class="clear"></div>

[JeffSM]

This is the result.

[Marin Bratanov]

Hi Jeff,

The most likely reason for this is that there is another Telerik button on the page with a different RenderMode: https://docs.telerik.com/devtools/aspnet-ajax/controls/checkbox/troubleshooting/distorted-appearance.

Also, if you want to have a custom image in a checkbox, I suggest you consider a ToggleButton instead: https://docs.telerik.com/devtools/aspnet-ajax/controls/togglebutton/overview.
 In case the built-in icons do not suffice for you (https://docs.telerik.com/devtools/aspnet-ajax/controls/togglebutton/functionality/Icons/embedded-icons), its toggle states expose an Image tag where you can provide a URL: https://docs.telerik.com/devtools/aspnet-ajax/controls/togglebutton/functionality/image.

Regards,
Marin Bratanov
Progress Telerik

[JeffSM]

Both solutions that you say are impossible to be made at this point of the development.

Thanks.

[Marin Bratanov]

Hi Jeff,

You can also use CSS to insert the image in the text span of the checkbox with fewer overrides:

<style type="text/css">
    .picCheckBox .rbText {
      background: url('16.png') no-repeat no-repeat;
      padding-left: 20px;
    }
</style>

<telerik:RadCheckBox Checked="false" CssClass="picCheckBox" ID="chk1" runat="server" Text="Some text" />

Regards,
Marin Bratanov
Progress Telerik

[JeffSM]

Hi Marin:

Works, but with some change:

 

.ChkTYPE16 .rbText { background-image: url('16.png') !important; background-repeat: no-repeat; }