网页中的checkbox – 如何让它们更大？

在大多数浏览器中渲染的标准checkbox都很小，即使使用较大的字体也不会增加大小。 什么是最好的，独立于浏览器的方式来显示更大的checkbox？

Answer 1

如果这可以帮助任何人，这里简单的CSS作为一个起点。 把它变成一个基本的圆形方形，足够大的拇指与切换的背景颜色。

input[type='checkbox'] { -webkit-appearance:none; width:30px; height:30px; background:white; border-radius:5px; border:2px solid #555; } input[type='checkbox']:checked { background: #abd; } 

Answer 2

其实有一种方法可以让它们更大，checkbox就像其他任何东西（甚至像Facebookbutton的iframe）。

用“缩放”元素包装它们：

 .double { zoom:2; transform:scale(2); -ms-transform:scale(2); -webkit-transform:scale(2); -o-transform:scale(2); -moz-transform:scale(2); transform-origin:0 0; -ms-transform-origin:0 0; -webkit-transform-origin:0 0; -o-transform-origin:0 0; -moz-transform-origin:0 0; -webkit-transform-origin:0 0; } <div class="double"> <input type="checkbox" name="hello" value="1"> </div> 

它可能看起来有点“重新调整”，但它的工作原理。

当然，你可以让这个div浮动：left，把你的标签放在它之外，float：left。

Answer 3

试试这个CSS

 input[type=checkbox] {width:100px; height:100px;} 

Answer 4

使用CSS更改checkbox的大小会在浏览器和操作系统中产生不一致的结果。 你不能真正把它做大。

您可以重新设置它们，但是： http ://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

Answer 5

这里有一个技巧，可以在大多数最新的浏览器（IE9 +）中作为一个CSS的解决scheme，可以改善与JavaScript以支持IE8及以下。

 <div> <input type="checkbox" id="checkboxID" name="checkboxName" value="whatever" /> <label for="checkboxID"> </label> </div> 

按照您希望checkbox的样式来设置label样式

 #checkboxID { position:  绝对  固定;
   margin-right：2000px;
  对：100％
 }
 #checkboxID +标签
 {
   / *未选中状态* /
 }
 #checkboxID：选中+标签
 {
   / *选中状态* /
 } 

对于JavaScript，您将能够添加类到标签来显示状态。 另外，使用以下function将是明智的：

 $('label[for]').live('click', function(e){ $('#' + $(this).attr('for') ).click(); return false; }); 

编辑修改#checkboxID样式

Answer 6

我正在写一个phonegap应用程序，checkbox的大小，外观等因此我做了我自己的简单的checkbox：

首先是HTML代码：

 <span role="checkbox"/> 

那么CSS：

 [role=checkbox]{ background-image: url(../img/checkbox_nc.png); height: 15px; width: 15px; display: inline-block; margin: 0 5px 0 5px; cursor: pointer; } .checked[role=checkbox]{ background-image: url(../img/checkbox_c.png); } 

要切换checkbox状态，我使用了JQuery：

 CLICKEVENT='touchend'; function createCheckboxes() { $('[role=checkbox]').bind(CLICKEVENT,function() { $(this).toggleClass('checked'); }); } 

但是没有它可以很容易地完成

希望它可以帮助！