增加asp.net中复选框的大小？答案

【问题标题】：Increase size of checkbox in asp.net?增加asp.net中复选框的大小？
【发布时间】：2011-01-03 03:40:06
【问题描述】：

我确实尝试了很多来增加 asp.net 中复选框的大小。使用 css 样式表，但它不起作用。

可能是我做错了什么。我正在尝试增加复选框的宽度、大小和高度，但还没有发生。

谁能提供可以做到这一点的 C# 代码或 css 代码？

【问题讨论】：

嗨，这在 CSS 中是完全可能的。你可以去看看我的答案，如果它适合你，也许可以接受它作为好的答案？

标签： c# asp.net css

【解决方案1】：

在 asp.net 中，一个复选框将变成一个带有“复选框”类型输入的跨度

为了调整它的大小，只需将 css 类应用于 asp.net 复选框并将其添加到您的样式表中。样式必须应用于复选框的嵌入输入，如下所示：

<asp:CheckBox ID="chkBoxName" runat="server" CssClass="ChkBoxClass"/>

.ChkBoxClass input {width:25px; height:25px;}

【讨论】：

PLUS ONE 得到一个很棒的答案！做得好！对我来说就像一个魅力！！！

【解决方案2】：

有一个 html 复选框。

<input type="checkbox" id="fatty">
<label for="checkbox-1">Checkbox 1</label>

fatty { /* Change width and height */
   width:4em;
   height:4em;
}

我是从 here 那里得到的。

【讨论】：

没有。我不想使用 html 控件。我说的是 .net 复选框控件。
@Sikender：asp.net 复选框控件呈现类似于 Jason 的示例。

【解决方案3】：

聚会有点晚了，但我会把这个留给其他需要帮助使复选框更大的人。

input[type=checkbox] {
    -ms-transform: scale(3); /* IE */
    -moz-transform: scale(3); /* FF */
    -webkit-transform: scale(3); /* Safari and Chrome */
    -o-transform: scale(3); /* Opera */
}

在代码 sn-p 中提供的示例。

.scale1 {
    margin: 15px;
    -ms-transform: scale(1); /* IE */
    -moz-transform: scale(1); /* FF */
    -webkit-transform: scale(1); /* Safari and Chrome */
    -o-transform: scale(1); /* Opera */
}

.scale2 {
    margin: 15px;
    -ms-transform: scale(2); /* IE */
    -moz-transform: scale(2); /* FF */
    -webkit-transform: scale(2); /* Safari and Chrome */
    -o-transform: scale(2); /* Opera */
}

.scale3 {
    margin: 15px;
    -ms-transform: scale(3); /* IE */
    -moz-transform: scale(3); /* FF */
    -webkit-transform: scale(3); /* Safari and Chrome */
    -o-transform: scale(3); /* Opera */
}

<input id="cb1" type="checkbox" class="scale1">
<label for="cb1">scale1 </label>

<input id="cb2" type="checkbox" class="scale2">
<label for="cb2">scale2 </label>

<input id="cb3" type="checkbox" class="scale3">
<label for="cb3">scale3 </label>

【讨论】：

【解决方案4】：

由于某种原因，这对我不起作用：

   <asp:CheckBox id="requestAccountCB" style="width: 20px; height: 20px;" runat="server"/>

但这有效：

    <style>
        #requestAccountCB { width: 20px; height: 20px }
    </style>

...

    <body>
       <form runat="server">
           <asp:CheckBox id="requestAccountCB" runat="server"/>
       </form>
    </body>

【讨论】：

【解决方案5】：

如上所述，这不能完成。

您可以做的是在复选框内添加标签并为该标签设置背景图像。这一切都是用 css 完成的，而且效果很好。

input[type=checkbox] {
display:none;
}

input[type=checkbox] + label
{
background-image: url('images/off.gif');
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}

input[type=checkbox]:checked + label
{
background-image: url('images/on.gif');
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}

还有HTML代码：

<input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"></label>

代码可以在this fiddle 中找到。

我找到了这个解决方案here。

顺便说一句：如果你像我一样使用 ASP.NET，你可以像这样添加 label 标签：

 <asp:CheckBox runat="server" ID="chkEmailForUnpluggedService" Text="<label for='thing'>" />

【讨论】：

【解决方案6】：

这个解决方案非常适合我：

Html 渲染如下：

<span class="15465503">
    <input id="ctl00_ctl00_ctl00_BB_SB_ScB_ucSR_rptR_ctl01_chkShortlist" 
     type="checkbox" name="ctl00$ctl00$ctl00$BB$SB$ScB$ucSR$rptR$ctl01$chkShortlist");">
</span>

改变复选框大小的CSS是：

input[id$="chkShortlist"] {
width: 18px;
height: 18px;
}

【讨论】：

【解决方案7】：

在 2021 年，如果有人仍然需要这方面的帮助 - 上面的众多答案并没有帮助我在旧的 WebForms 应用程序中调整 ASP 复选框的大小。相反，将复选框添加为标准 HTML 输入元素（如 type="checkbox"），而不是 ASP:CheckBox，然后设置 runat="server"，帮助我能够使用内联样式来控制它，同时仍然能够在后面的代码中控制它。例如

<input type="checkbox" id="cbInputDamagedStatus" style="width:1.5em; height:1.5em; display: inline-block;" runat="server" />

和

cbInputDamagedStatus.Checked = true;

【讨论】：

【解决方案8】：

你做不到。 Checkbox 是一个窗口浏览器组件。您可以做的最好的事情是让您自己的控件看起来像一个复选框，但实际上由每个状态的图像组成。

以下是一些使用图像而不是复选框的控件示例：

【讨论】：

查看此链接。你明白了.....456bereastreet.com/lab/styling-form-controls-revisited/checkbox
它适用于 IE 6 和 IE 7，但不适用于 IE 6 和 IE 7，但不适用于 8、FF 和 chrome（即使在 IE 中，它也非常像素化）。
@Sikender：你愿意使用 AJAXControlToolkit（我推荐它）吗？如果是这样，他们有一个切换按钮控件。您可以简单地指定图像，它可以工作：asp.net/ajax/ajaxcontroltoolkit/samples/ToggleButton/…
@Yannick Richard 的解决方案非常适合作为纯 CSS 解决方案。
你可以做到。减 1