CODEWITHSUNDEEP
c#cssasp.net
Akshay
Akshay

Reputation: 1472

Need to just display checkbox as radio button , ASP.net

I am trying to display a checkbox as radio button.

I have tried jsfiddle mentioned in this question but it doesn't work with asp control.

Is there a way to show asp checkbox control as radio button ?

Can you style an html radio button to look like a checkbox?

<asp:CheckBox ID="r" runat="server"  />

input[type="checkbox"] {
          -webkit-appearance: radio;
    -moz-appearance: radio;
    -ms-appearance: radio;     /* not currently supported */
    -o-appearance: radio; 
        }

Upvotes: 1

Views: 1038

Answers (2)

Akshay
Akshay

Reputation: 1472

well, I ended up doing this, works great for me.

<asp:CheckBox ID="CheckBox1" runat="server"  />

                   <AjaxToolkit:ToggleButtonExtender ID="ToggleButtonExtender1" runat="server"  
                    TargetControlID="CheckBox1"  
                    ImageWidth="16"  
                    ImageHeight="16"  
                    UncheckedImageUrl="~/Images/uncheck.png"  
                    CheckedImageUrl="~/Images/check.png"  
                    CheckedImageAlternateText="Check"  
                    UncheckedImageAlternateText="UnCheck">  
                </AjaxToolkit:ToggleButtonExtender>

Upvotes: 1

fdelia
fdelia

Reputation: 385

How about making it round with corners, e.g.:

input[type="checkbox"] {
    width: 1.3em;
    height: 1.3em;
    background-color: white;
    border-radius: 50%;
    vertical-align: middle;
    border: 1px solid #ddd;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
}

input[type="checkbox"]:checked {
    background-color: gray;
}

See CodePen.

Upvotes: 0

Related Questions