只需将复选框显示为单选按钮，ASP.net答案

【问题标题】：Need to just display checkbox as radio button , ASP.net只需将复选框显示为单选按钮，ASP.net
【发布时间】：2018-02-16 07:49:23
【问题描述】：

我正在尝试将复选框显示为单选按钮。

我已经尝试过这个问题中提到的 jsfiddle，但它不适用于 asp 控件。

有没有办法将 asp 复选框控件显示为单选按钮？

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

【问题讨论】：

为什么不使用单选按钮？
我想要复选框功能，只需要像单选按钮或任何圆形一样显示它。

标签： c# css asp.net

【解决方案1】：

好吧，我最终这样做了，对我来说效果很好。

<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>

【讨论】：

【解决方案2】：

把它做成圆角怎么样，例如：

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

见CodePen。

【讨论】：

codepen 仍然显示方形复选框，我使用了 AjaxToolkit:ToggleButtonExtender。它对我来说很好。
对不起，在我的情况下它显示一个圆形复选框。 ://