blocks|key|208254|text|若要使复选框的大小加倍，可以使用CSS+scale属性。(2,2)表示2倍的宽度和2倍的高度，但这将是相当大的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|208255|input[type="checkbox"]+{
++transform:scale(2,+2);
}|code-block|syntax|javascript|208256|您也可以使用十进制值，只是稍微大一点的复选框。|208257|input[type="checkbox"]+{
++++++transform:scale(1.3,+1.3);
++++}|208258|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

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. 

<pre><code>input[type="checkbox"] {
 transform:scale(2, 2);
}
</code></pre>

You can also use decimal values, for just slightly bigger checkboxes.

<pre><code>input[type="checkbox"] {
 transform:scale(1.3, 1.3);
 }
</code></pre>

blocks|key|208158|text|设置复选框的样式是一件有风险的事情。这是那些似乎永远不会在所有浏览器上都一致工作的事情之一。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|208159|或者您可以尝试使用|208160|+style="zoom:1.2"|code-block|syntax|javascript|208161|jQuery提供了一个plugin来替换复选框|offset|length|208162|entityMap|0|LINK|mutability|MUTABLE|url|http://archive.plugins.jquery.com/project/ui-checkbox^0|0|0|0|B|6|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

Styling checkboxes is risky business. It's one of those things that never seems to work consistently with all browsers.

or you can try with 

<pre><code> style="zoom:1.2"
</code></pre>

jQuery offers a <a href="http://archive.plugins.jquery.com/project/ui-checkbox">plugin</a> to do a replacement on checkboxes

blocks|key|208374|text|这是可行的。它使用相对大小，因此可以根据您当前的字体大小进行缩放。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|208375|input[type="checkbox"]+{
++width:+1.2em;
++height:+1.2em;
}|code-block|syntax|javascript|208376|不过，您可能需要调整您的边距。|208377|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

This works. It uses relative sizes so it scales with your current font size.

<pre><code>input[type="checkbox"] {
 width: 1.2em;
 height: 1.2em;
}
</code></pre>

You may need to adjust your margins though.

blocks|key|208230|text|我认为你能做的最好的就是给它一个更大的字体。接下来就看浏览器如何处理它了，除非你创建一个控制隐藏复选框的模拟div元素。它不会把它放大那么多。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|208231|input[type="checkbox"]+{
++font-size:+50px;
}|code-block|syntax|javascript|208232|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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.

<pre><code>input[type="checkbox"] {
 font-size: 50px;
}
</code></pre>

blocks|key|208296|text|我已经成功地使用了这个库。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|208297|http://plugins.krajee.com/checkbox-x|offset|length|208298|它需要jQuery和bootstrap+3.x|208299|在这里下载压缩包：https://github.com/kartik-v/bootstrap-checkbox-x/zipball/master|208300|将zip中的内容放在项目内的文件夹中|208301|在头文件中弹出所需的库|208302|<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>|code-block|syntax|javascript|208303|使用data-+size+="xl“将数据控件添加到元素以更改大小，如http://plugins.krajee.com/cbx-sizes-demo所示|208304|<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"/>|208305|如果你浏览这个插件网站，还有许多其他的功能。|208306|entityMap|0|LINK|mutability|MUTABLE|url|1|https://github.com/kartik-v/bootstrap-checkbox-x/zipball/master|2|http://plugins.krajee.com/cbx-sizes-demo^0|0|0|10|0|0|0|9|1R|1|0|0|0|0|Z|14|2|0|0|0^^$0|@$1|2|3|4|5|6|7|19|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1A|8|@]|9|@$D|1B|E|1C|1|1D]]|A|$]]|$1|F|3|G|5|6|7|1E|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|1F|8|@]|9|@$D|1G|E|1H|1|1I]]|A|$]]|$1|J|3|K|5|6|7|1J|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1K|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|1L|8|@]|9|@]|A|$Q|R]]|$1|S|3|T|5|6|7|1M|8|@]|9|@$D|1N|E|1O|1|1P]]|A|$]]|$1|U|3|V|5|P|7|1Q|8|@]|9|@]|A|$Q|R]]|$1|W|3|X|5|6|7|1R|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1S|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|C]]|15|$5|11|12|13|A|$14|16]]|17|$5|11|12|13|A|$14|18]]]]

I have used this library with sucess

<a href="http://plugins.krajee.com/checkbox-x" rel="nofollow noreferrer">http://plugins.krajee.com/checkbox-x</a>

It requires jQuery and bootstrap 3.x

Download the zip here: <a href="https://github.com/kartik-v/bootstrap-checkbox-x/zipball/master" rel="nofollow noreferrer">https://github.com/kartik-v/bootstrap-checkbox-x/zipball/master</a> 

Put the contents of the zip in a folder within your project

Pop the needed libs in your header

<pre><code>&lt;link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"&gt;
&lt;link href="path/to/css/checkbox-x.min.css" media="all" rel="stylesheet" type="text/css" /&gt;
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="path/to/js/checkbox-x.min.js" type="text/javascript"&gt;&lt;/script&gt;
</code></pre>

Add the data controls to the element using the data-size="xl" to change the size as shown here <a href="http://plugins.krajee.com/cbx-sizes-demo" rel="nofollow noreferrer">http://plugins.krajee.com/cbx-sizes-demo</a>

<pre><code>&lt;label for="element_id"&gt;CheckME&lt;/label&gt;
&lt;input type="checkbox" name="my_element" id="element_id" value="1" data-toggle="checkbox-x" data-three-state="false" data-size="xl"/&gt;
</code></pre>

There are numerous other features as well if you browse the plugin site.

blocks|key|426368|text|样式化checkbox是一个非常奇怪的世界，完全没有跨浏览器的问题。更多信息可以在这里找到，http://www.456bereastreet.com/lab/form_controls/checkboxes/你也可以用javascript创建你自己的，但这对用户可访问性不是很好。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|426369|因此，如果可能的话，我会尽量避免更改。|426370|entityMap|0|LINK|mutability|MUTABLE|url|http://www.456bereastreet.com/lab/form_controls/checkboxes/^0|1A|1N|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

Styling checkbox's is a very wierd world full off cross browser issues. More info can be found here <a href="http://www.456bereastreet.com/lab/form_controls/checkboxes/" rel="nofollow">http://www.456bereastreet.com/lab/form_controls/checkboxes/</a> You can also create your own with javascript but this is not great for user accessibility. 

So I would tray an avoid changing if possible.

blocks|key|426499|text|或者简单地设置它的高度和宽度，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|426500|<input+style="height:+26px;+width:26px;+margin-left:-30px"+value=""+type="checkbox">|code-block|syntax|javascript|426501|PS。我在bootstrap和"checkbox-inline“类中使用过它。|426502|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Or simply style it with height and width like this:

<pre><code>&lt;input style="height: 26px; width:26px; margin-left:-30px" value="" type="checkbox"&gt;
</code></pre>

PS. I have used this with bootstrap and the "checkbox-inline" class

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.

Ideas?

Create CSS to enlarge checkboxes

我正试图在几个页面上将我的复选框的大小增加一倍。如何在CSS中实现这一点？我不想设计悬停的样式。想法？

问创建CSS以放大复选框
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问创建CSS以放大复选框EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问创建CSS以放大复选框
EN