Change Style/Look of Asp:CheckBox using CSS

Question

I want to change the standard \"3D\" look of the standard asp.net checkbox to say solid 1px. If I try to apply the styling to the Border for example it does just that - draw

Answer 1

Well, I went through every solution I could find.

The Ajax Control Toolkit works, but it creates a weird html output with all kinds of spans and other styling that is hard to work with.

Using css styling with the ::before tags to hide the original control's box would work, but if you placed runat=server into the element to make it accessible to the code-behind, the checkbox would not change values unless you actually clicked in the original control.

In some of the methods, the entire line for the label would end up under the checkbox if the text was too long for the viewing screen, or would end up underneath the checkbox.

In the end, (on the adice of @dimarzionist's answer here in this page) I used an asp.net ImageButton and used the codebehind to change the image. With this solution I get nice control over the styles and can determine whether the box is checked from the codebehind.

I have read and promise to fulfill the rules and obligations

And in the code-behind

    protected void checkbox_Click(object sender, ImageClickEventArgs e) {
        if (mycheckbox.ImageUrl == "unchecked.png") {
            mycheckbox.ImageUrl = "checked.png";
            //Do something if user checks the box
        } else {
            mycheckbox.ImageUrl = "unchecked.png";
            //Do something if the user unchecks the box
        }
    }

What's more, is with this method, The you use for the checkbox's text will wrap perfectly with the checkbox.

.checkboxlabel{
    vertical-align:middle;
    font-weight: bold;
}
.checkbox{
    height: 24px;  /*height of the checkbox image*/
    vertical-align: middle;
}