创建 CSS 以放大复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13631537/
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
Create CSS to enlarge checkboxes
提问by codeChris
I am trying to double the size of my checkboxes on a few pages. How do I make that happen in CSS? I don't want to style the hover.
我正在尝试将几页上的复选框的大小加倍。我如何在 CSS 中实现这一点？我不想为悬停设置样式。
Ideas?
想法？
采纳答案by Andy
You could always use the checkbox hack to make your own checkbox. This allows for a much more cross browser compatible solution.
您始终可以使用复选框技巧来制作自己的复选框。这允许更多跨浏览器兼容的解决方案。
I made a quick demo here, obviously you would have to get a transparent .png of a tick, not the one I got.
我在这里做了一个快速演示，显然你必须得到一个透明的 .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>回答by stwp
To double the size of checkboxes, you can use the CSS scale property. The (2,2) means 2 times the width and 2 times the height of the original, but this will be quite large.
要将复选框的大小加倍，您可以使用 CSS scale 属性。(2,2) 表示原始宽度的 2 倍和高度的 2 倍，但这会非常大。
input[type="checkbox"] {
transform:scale(2, 2);
}
You can also use decimal values, for just slightly bigger checkboxes.
你也可以使用十进制值，只是稍微大一点的复选框。
input[type="checkbox"] {
transform:scale(1.3, 1.3);
}
回答by Rahul Tripathi
回答by Chloe
This works. It uses relative sizes so it scales with your current font size.
这有效。它使用相对大小，因此可以根据您当前的字体大小进行缩放。
input[type="checkbox"] {
width: 1.2em;
height: 1.2em;
}
You may need to adjust your margins though.
不过，您可能需要调整边距。
回答by Kurt Emch
I think the best you can do is give it a bigger font-size. From there it's up to how the browser handles it unless you make a mock div element that controls a hidden checkbox. It doesn't scale it up that much.
我认为你能做的最好的事情就是给它一个更大的字体大小。从那里开始取决于浏览器如何处理它，除非您制作一个控制隐藏复选框的模拟 div 元素。它并没有把它放大那么多。
input[type="checkbox"] {
font-size: 50px;
}
回答by Dominic Green
Styling checkbox's is a very wierd world full off cross browser issues. More info can be found here http://www.456bereastreet.com/lab/form_controls/checkboxes/You can also create your own with javascript but this is not great for user accessibility.
样式复选框是一个非常奇怪的世界，充满了跨浏览器的问题。更多信息可以在这里找到http://www.456bereastreet.com/lab/form_controls/checkboxes/你也可以用 javascript 创建你自己的，但这对用户的可访问性来说不是很好。
So I would tray an avoid changing if possible.
所以我会尽可能避免改变。
回答by aldrien.h
Simply add background image to checkbox. And adjust the sizes as you prefer.
只需将背景图像添加到复选框。并根据您的喜好调整尺寸。
The code below automatically adds background when it's checked, and the size remains the same with uncheckedstatus.
下面的代码在勾选时自动添加背景，未勾选时大小保持不变。
No need to specify like:
无需指定如下：
input[type=checkbox]:checked
or
或者
input[type=checkbox]:checked ~ div label
For ex, all checkboxes:
例如，所有复选框：
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;
}
See fiddle here.
请参阅此处的小提琴。
回答by DropHit
I have used this library with sucess
我已经成功地使用了这个库
http://plugins.krajee.com/checkbox-x
http://plugins.krajee.com/checkbox-x
It requires jQuery and bootstrap 3.x
它需要 jQuery 和 bootstrap 3.x
Download the zip here: https://github.com/kartik-v/bootstrap-checkbox-x/zipball/master
在此处下载 zip：https: //github.com/kartik-v/bootstrap-checkbox-x/zipball/master
Put the contents of the zip in a folder within your project
将 zip 的内容放在项目中的文件夹中
Pop the needed libs in your header
在您的标题中弹出所需的库
<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>
Add the data controls to the element using the data-size="xl" to change the size as shown here http://plugins.krajee.com/cbx-sizes-demo
使用 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"/>
There are numerous other features as well if you browse the plugin site.
如果您浏览插件站点，还有许多其他功能。
回答by Asle G
Or simply style it with height and width like this:
或者简单地使用高度和宽度设置样式，如下所示：
<input style="height: 26px; width:26px; margin-left:-30px" value="" type="checkbox">
PS. I have used this with bootstrap and the "checkbox-inline" class
附注。我已经将它与 bootstrap 和“checkbox-inline”类一起使用
