【发布时间】：2012-11-17 20:47:27
【问题描述】：
我试图在几页上将复选框的大小加倍。如何在 CSS 中实现这一点？我不想为悬停设置样式。
想法？
【问题讨论】：
-
Checkbox size 的可能重复项
【发布时间】：2012-11-17 20:47:27
【问题描述】：
【讨论】：
-
这个对我不起作用。我应该设置输入元素的样式吗？
-
是的，您可以尝试一下，但我不建议这样做，因为它在不同的浏览器中会不一致。
样式复选框是一个非常奇怪的世界，完全解决了跨浏览器问题。更多信息可以在这里找到http://www.456bereastreet.com/lab/form_controls/checkboxes/ 您也可以使用 javascript 创建自己的，但这对于用户可访问性来说不是很好。
所以如果可能的话，我会尽量避免改变。
【讨论】：
我认为你能做的最好的就是给它一个更大的字体大小。从那里开始取决于浏览器如何处理它，除非您制作一个控制隐藏复选框的模拟 div 元素。它并没有扩大那么多。
input[type="checkbox"] {
font-size: 50px;
}
【讨论】：
-
这似乎也是一个跨浏览器的问题（如下我的建议）。
您始终可以使用复选框 hack 来制作您自己的复选框。这允许更多跨浏览器兼容的解决方案。
我做了一个快速演示 here，显然你必须得到一个透明的 .png 刻度，而不是我得到的那个。
input[type=checkbox]:checked ~ div label{
background: url(http://ramyasspace.files.wordpress.com/2011/06/tick.jpg);
background-size: 100%;
}
input {
display: none;
}
label input[type=checkbox] ~ span {
display: inline-block;
vertical-align: middle;
cursor: pointer;
background: #fff;
border: 1px solid #888;
padding: 1px;
height: 20px;
width: 20px;
}
label input[type=checkbox]:checked ~ span {
/* image: Picol.org, cc-by 3.0, https://commons.wikimedia.org/wiki/File:Accept_Picol_icon.svg */
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M14 18L26 6l4 4-16 16L4 16l4-4z"/></svg>');
background-size: 100%;
}<label>
Click me:
<input type="checkbox" />
<span></span>
</label>【讨论】：
-
我喜欢它！它实际上在许多浏览器中运行良好。不过，问你一个问题：我如何检查它？它不适用于您给我的代码...
-
怎么不检查？什么浏览器？应该这样做，当复选框执行时，标签会被 :checked，反之亦然。
-
如果您想保持理智，请不要覆盖复选框。
-
作为“跨浏览器”在 Opera Mini 上不起作用。 -1
-
使用图片是解决这个简单问题的重量级解决方案。
要将复选框的大小加倍，您可以使用 CSS scale 属性。 (2,2) 表示原始宽度的 2 倍和高度的 2 倍，但这会非常大。
input[type="checkbox"] {
transform:scale(2, 2);
}
您也可以使用十进制值，只是稍微大一点的复选框。
input[type="checkbox"] {
transform:scale(1.3, 1.3);
}
【讨论】：
-
如果我错了请纠正我，但缩放不适用于所有浏览器：w3schools.com/css/css3_2dtransforms.asp
-
小心使用比例。要支持所有浏览器，您应该做的更多：参见stackoverflow.com/questions/306924/checkbox-size-in-html-css
-
真的很像素化。不是理想的解决方案恕我直言。
我已经成功使用了这个库
http://plugins.krajee.com/checkbox-x
它需要 jQuery 和 bootstrap 3.x
在此处下载 zip：https://github.com/kartik-v/bootstrap-checkbox-x/zipball/master
将 zip 的内容放入项目中的文件夹中
在标题中弹出所需的库
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="path/to/css/checkbox-x.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="path/to/js/checkbox-x.min.js" type="text/javascript"></script>
使用 data-size="xl" 将数据控件添加到元素以更改大小，如下所示http://plugins.krajee.com/cbx-sizes-demo
<label for="element_id">CheckME</label>
<input type="checkbox" name="my_element" id="element_id" value="1" data-toggle="checkbox-x" data-three-state="false" data-size="xl"/>
如果您浏览插件站点，还有许多其他功能。
【讨论】：
-
很好，但是没有 Bootstrap 的东西会更好。
或者简单地用这样的高度和宽度来设置它：
<input style="height: 26px; width:26px; margin-left:-30px" value="" type="checkbox">
PS。我已经将它与引导程序和“checkbox-inline”类一起使用
【讨论】：
-
适用于 Crome 和 IE。似乎是 Firefox 和 Safari 的问题，所以我猜你是对的。
只需将背景图片添加到复选框。并根据需要调整大小。
下面的代码在选中时自动添加背景，在unchecked状态下大小保持不变。
不需要像这样指定：
input[type=checkbox]:checked
或
input[type=checkbox]:checked ~ div label
例如，所有复选框：
input[type="checkbox"]{
background: url('http://refundfx.com.au/uploads/image/checkbox_full.png');
background-size: 20px;
background-repeat: no-repeat;
width: 20px;
height: 20px;
margin: 0;
}
见小提琴here。
【讨论】：
这行得通。它使用相对大小，因此可以根据您当前的字体大小进行缩放。
input[type="checkbox"] {
width: 1.2em;
height: 1.2em;
}
您可能需要调整边距。
【讨论】：