C# 增加asp.net中复选框的大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2031686/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Increase size of checkbox in asp.net?
提问by sikender
I really tried a lot to increase a size of checkbox in asp.net. using css style sheet but it doesn't work.
我真的尝试了很多来增加asp.net中复选框的大小。使用 css 样式表，但它不起作用。
Might be I have done something wrong. I am try to increase the width, size and height of checkbox, but it doesnt happen yet.
可能是我做错了什么。我试图增加复选框的宽度、大小和高度，但还没有发生。
Can anyone provide C# code or css code that can do this?
任何人都可以提供可以做到这一点的 C# 代码或 css 代码吗？
采纳答案by Gabriel McAdams
You can't do it. A Checkbox is a windowed browser component. The best you can do is to make your own control that LOOKS like a checkbox, but is actually made up of an image for each state.
你不能这样做。复选框是一个窗口化的浏览器组件。你能做的最好的事情就是让你自己的控件看起来像一个复选框，但实际上由每个状态的图像组成。
Here are some examples of controls that use images instead of checkboxes:
以下是一些使用图像而不是复选框的控件示例：
回答by Jason Rowe
回答by BernieSF
for some reason, this doesn't worked for me:
出于某种原因，这对我不起作用：
<asp:CheckBox id="requestAccountCB" style="width: 20px; height: 20px;" runat="server"/>
but this worked:
但这有效：
<style>
#requestAccountCB { width: 20px; height: 20px }
</style>
...
...
<body>
<form runat="server">
<asp:CheckBox id="requestAccountCB" runat="server"/>
</form>
</body>
回答by Yannick Richard
In asp.net a checkbox will become a span with an input of type "checkbox"
在 asp.net 中，复选框将成为输入类型为“复选框”的跨度
In order to resize it, just apply a css class to the asp.net checkbox and add this to your style sheet. the style must be applied to the the embeded input of the checkbox like this :
为了调整它的大小，只需将一个 css 类应用到 asp.net 复选框并将其添加到您的样式表中。样式必须应用于复选框的嵌入输入，如下所示：
<asp:CheckBox ID="chkBoxName" runat="server" CssClass="ChkBoxClass"/>
.ChkBoxClass input {width:25px; height:25px;}
回答by Hugo Nava Kopp
As mentioned above, this can'tbe done.
如上所述，这是无法做到的。
What you can do is add a tag inside the checkbox and set a background image to that tag. It's all done with css and it works perfectly.
您可以做的是在复选框内添加一个标签，并为该标签设置背景图像。这一切都是用 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;
}
And HTML code:
和 HTML 代码：
<input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"></label>
The code can be found in thisfiddle.
代码可以在这个小提琴中找到 。
I found this solution here.
我在这里找到了这个解决方案。
BTW: if you're using ASP.NET like me, you can add the labeltag as so:
顺便说一句：如果你像我一样使用 ASP.NET，你可以像这样添加标签标签：
<asp:CheckBox runat="server" ID="chkEmailForUnpluggedService" Text="<label for='thing'>" />
回答by Chris
A little late to the party but I'll leave this here for anyone else that needs help making check boxes bigger.
聚会有点晚了，但我会把它留在这里给任何需要帮助使复选框变大的人。
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 */
}
Example provided in the code snippet.
代码片段中提供的示例。
.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>回答by D.B
This solution works perfect for me:
这个解决方案非常适合我：
Html Rendered looks like this:
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 to change the check box size is:
更改复选框大小的 CSS 是：
input[id$="chkShortlist"] {
width: 18px;
height: 18px;
}
