我想调整复选框的大小,例如大小为200%。
我尝试了这个问题的解决方案:
input.big[type=checkbox]
{
transform: scale(2);
padding: 10px;
}
但这只会使复选框变大,而不会调整布局大小,导致其周围的所有内容重叠;对我来说,"填充"对Chrome或Firefox都没有影响(无论如何,将相对大小与绝对像素指标混合在一起将是一个丑陋的解决方案)。
是否有一种解决方案可以调整复选框的所有大小,这不仅意味着可见部分,还意味着布局大小,这样它就不会像普通复选框一样重叠?
编辑:我也尝试过这个:
input.big[type=checkbox]
{
width:200%;
height:200%;
}
但这会打乱Chrome中的整个布局(复选框在一个简单的表格中,Chrome会将它们放在远离表格单元格的地方),在Firefox 中也没有任何效果
希望这个FIDDLE能为你工作
http://jsfiddle.net/rpku6d89/19/
HTML
<input type="checkbox" name="optiona" id="opta" class="paddingClass" checked />
<span class="checkboxtext">
Option A
</span>
<input type="checkbox" name="optionb" id="optb" class="paddingClass" />
<span class="checkboxtext">
Option B
</span>
<input type="checkbox" name="optionc" id="optc" class="paddingClass"/>
<span class="checkboxtext">
Option C
</span>
CSS
input[type=checkbox] {
/* All browsers except webkit*/
transform: scale(2);
/* Webkit browsers*/
-webkit-transform: scale(2);
}
.paddingClass{
margin:20px;
padding:5px;
}