HTML / CSS：如何调整复选框的大小（不重叠） [英] HTML/CSS: How to resize checkboxes (without overlapping)

问题描述

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

I want to resize a checkbox, for example to 200% size.

我尝试了此问题：

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

但这只是使复选框更大，不会调整布局大小，导致其周围的一切重叠;也是填充对我没有影响Chrome或Firefox（而且这将是一个丑陋的解决方法，无论如何混合相对尺寸与绝对像素的指标）。

but that just makes the checkbox bigger and does not resize the layout-size, resulting in an overlap of everything around it; also the "padding" had no effect on either Chrome or Firefox for me (and it would be an ugly workaround anyway to mix relative sizes with absolute pixel metrics).

有一个解决方案可以调整复选框的所有内容，这意味着不只是可见部分，而且还有布局大小，以便它不像正常的复选框重叠？

Is there a solution that resizes everything of the checkbox, that means not just the visible part, but also the layout-size, so that it does not overlap just like a normal checkbox?

Edit：我也尝试过：

I also tried this:

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

但这会弄乱Chrome的整个布局表格和Chrome让他们远离他们的表格单元格），它在Firefox中完全没有影响

but that messes up the whole layout in Chrome (the checkboxes are in a simple table and Chrome puts them far away from their table cells) and it has no effect at all in Firefox

推荐答案

希望这个FIDDLE工作为您

hope this FIDDLE work for you

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：如何调整复选框的大小（不重叠）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！