ASP.NET checkbox with custom design

Question

Is there any way to change the style ui of the asp.net checkbox. I tried this:

.cabeceraCheckBoxNormal
{
    background:url("../../../ig_res/Default/images/ig_checkbox_off.gif") no-repeat;
    clear:left;
    margin:0;
    padding:0;
}

but the result is not what i looking for. Because the image appears near the control, and i can see the normal style near the image. Like this enter image description here

Edit: I decided to inspect the html generated and I saw that the ID set on asp checkbox is set to a span, and inside this is the input type checkbox... so I change the style to this:

input[type="checkbox"]
{
    background:url("../../../ig_res/Default/images/ig_checkbox_off.gif") no-repeat;
    background-position: 3px 2px;
    display:block;
    clear:left;
    margin:0;
    padding:0;
}

But nothing happens

possible duplicate of Change Style/Look of Asp:CheckBox using CSS — Forgotten Semicolon
– Forgotten Semicolon, Commented Jan 17, 2012 at 17:50
Checkboxes are browser dependent. I tried something as simple as setting borders and found it only worked in a couple of browsers. You can embed the checkbox in a <div> and adorn it. — ron tornambe
– ron tornambe, Commented Jan 17, 2012 at 17:51
Check out the following link http://www.thecssninja.com/css/custom-inputs-using-css Demo — santosh singh
– santosh singh, Commented Jan 17, 2012 at 17:53

Spudley · Accepted Answer · 2015-08-06 21:56:14Z

4

By far the best way to get a customised checkbox effect is to add a <label> element linked with the checkbox via the for attribute. Then hide the checkbox and style the label's before pseudo-element as your checkbox instead.

Something like this:

<input type='checkbox' id='myCheck'><label for='myCheck'>Magic!</label>

with css:

#myCheck { visibility: hidden; }

input[type=checkbox] + label::before {
    display:block;
    content:url('ig_checkbox_off.gif');
    position:relative;
}
input[type=checkbox]:checked + label::before {
    content:url('ig_checkbox_on.gif');
}

I've created a jsFiddle example to demonstrate: http://jsfiddle.net/f9tLemyy/

Hope that helps.

answered Aug 6, 2015 at 21:56

Spudley

169k39 gold badges240 silver badges309 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bgmCoder Over a year ago

You can style the checkbox this way, sure - but if you add runat=server into the checkbox element (to get it into the server-side code) the image does not get replaced when you click on the checkbox. With the server having a hold on the control, it only checks/unchecks if the control is visible.

Collectives™ on Stack Overflow

ASP.NET checkbox with custom design

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related