Question

我想调整一个复选框的大小，例如大小为200％。

我尝试了this question的解决方案：

input.big[type=checkbox]
{
    transform: scale(2);
    padding: 10px;
}

但这只会使复选框更大，并且不会调整布局大小，导致其周围的所有内容重叠;还有＆＃34;填充＆＃34;对我来说对Chrome或Firefox都没有影响（无论如何，将相对大小与绝对像素指标混合在一起会是一个丑陋的解决方法）。

是否有一个解决方案可以调整复选框的所有内容，这不仅意味着可见部分，还意味着布局大小，以便它不像普通复选框那样重叠？

编辑：我也试过了：

input.big[type=checkbox]
{
    width:200%;
    height:200%;
}

但是这会混淆Chrome中的整个布局（复选框位于一个简单的表格中，而Chrome会将它们远离桌面单元格）并且它在Firefox中根本不起作用

Answer 1

希望这个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;
    }

HTML / CSS：如何调整复选框大小（不重叠）

1 个答案: