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 - draws the standard checkbox with a border around it - which is valid I guess.

Anyway, is there a way to change how the actual textbox is styled?

score 15 · Answer 1 · answered Sep 22 '08 at 03:54

Rather than use some non-standard control, what you should be doing is using un-obtrusive javascript to do it after the fact. See http://code.google.com/p/jquery-checkbox/ for an example.

Using the standard ASP checkbox simplifies writing the code. You don't have to write your own user control, and all your existing code/pages don't have to be updated.

More importantly, it is a standard HTML control that all browsers can recognize. It is accessible to all users, and work if they don't have javascript. For example, screen readers for the blind will be able to understand it as a checkbox control, and not just an image with a link.

score 6 · Accepted Answer · answered Sep 22 '08 at 02:41

6

I think the best way to make CheckBox looks really different is not to use checkbox control at all. Better use your own images for checked/unchecked state on-top of hyperlink or image element. Cheers.

answered Sep 22 '08 at 02:41

dimarzionist

18,517
4
22
23

Pretty much the conclusion I came up with also! – JamesSugrue Sep 22 '08 at 02:46
Usability and progressive enhancement, that's sooo last year... :( – ANeves Apr 12 '10 at 14:19

score 3 · Answer 3 · edited Jul 13 '16 at 15:10

3

Simplest best way, using the ASP checkbox control with custom design.

 chkOrder.InputAttributes["class"] = "fancyCssClass";

you can use something like that.. hope that helps

edited Jul 13 '16 at 15:10

Kalu Singh Rao

1,671
1
16
21

answered Apr 12 '10 at 14:08

purdueduck

31
1

That adds a class to the element from the code-behind, but how does it style the actual box? – bgmCoder Nov 13 '20 at 16:55

cymorg · Answer 4 · 2016-05-26T07:49:13.490

None of the above work well when using ASP.NET Web Forms and Bootstrap.

I ended up using Paul Sheriff's Simple Bootstrap CheckBox for Web Forms

<style>
    .checkbox .btn, .checkbox-inline .btn {
    padding-left: 2em;
    min-width: 8em;
    }
    .checkbox label, .checkbox-inline label {
    text-align: left;
    padding-left: 0.5em;
    }
    .checkbox input[type="checkbox"]{
        float:none;
    }
</style>


<div class="form-group">
    <div class="checkbox">
        <label class="btn btn-default">
            <asp:CheckBox ID="chk1" runat="server" Text="Required" />
        </label>
    </div>
</div>

The result looks like this...

score 3 · Answer 5 · answered Feb 27 '18 at 19:14

paste this code in your css and it will let you customize your checkbox style. however, it's not the best solution, it's pretty much displaying your style on top of the existing checkbox/radiobutton.

   input[type='checkbox']:after 
{

        width: 9px;
        height: 9px;
        border-radius: 9px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: #3B8054;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 3px solid #3B8054;
        transition: 0.5s ease;
        cursor: pointer;

}

input[type='checkbox']:checked:after 
    {
        background-color: #9DFF00;
    }

I tried this in fiddle to no avail: https://jsfiddle.net/g5rLxc9k/ — bgmCoder, Nov 12 '20 at 06:12

score 2 · Answer 6 · answered Jul 15 '10 at 15:23

2

Why not use Asp.net CheckBox button with ToggleButtonExtender available from the Ajax control toolkit.

answered Jul 15 '10 at 15:23

user392892

21
1

Your suggestion worked for me. Followed this example. http://www.ajaxcontroltoolkit.net/ToggleButton/ToggleButton.aspx – Doreen Mar 22 '18 at 18:07

score 1 · Answer 7 · answered Sep 22 '08 at 02:27

1

Not sure that it's really an asp.net related question.. Give this a shot, lots of good info here:

http://www.456bereastreet.com/archive/200409/styling_form_controls/

answered Sep 22 '08 at 02:27

Ian P

12,840
6
48
70

score 1 · Answer 8 · answered Sep 22 '08 at 02:34

Keep in mind that the asp:CheckBox control actually outputs more than just a single checkbox input.

For example, my code outputs

<span class="CheckBoxStyle">
    <input id="ctl00_cphContent_cbCheckBox" 
           name="ctl00$cphContent$cbCheckBox"
           type="checkbox">
</span>

where CheckBoxStyle is the value of the CssClass attribute applied to the control and cbCheckBox is the ID of the control.

To style the input, you need to write CSS to target

span.CheckBox input {
  /* Styles here */
}

score 0 · Answer 9 · edited May 23 '17 at 12:16

0

They're dependent on the browser really.

Maybe you could do something similar to the answer in this question about changing the file browse button.

edited May 23 '17 at 12:16

Community

1
1

answered Sep 22 '08 at 02:32

Matthew Rapati

5,648
4
28
48

bgmCoder · Answer 10 · 2020-11-13T17:56:26.543

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.

<asp:ImageButton ID="mycheckbox" CssClass="checkbox"  runat="server" OnClick="checkbox_Click" ImageUrl="unchecked.png" />
<span class="checkboxlabel">I have read and promise to fulfill the <a href="/index.aspx">rules and obligations</a></span>

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 <span> 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;
}

Change Style/Look of Asp:CheckBox using CSS

10 Answers10

Linked