如何使我的输入单选框/复选框根据标签字体大小调整大小？答案

【问题标题】：How can I make my input radio/checkbox to resize based on the label fontsize?如何使我的输入单选框/复选框根据标签字体大小调整大小？
【发布时间】：2015-04-26 05:47:07
【问题描述】：

我希望这样当用户选择将应用于标签的字体大小时，标签将调整输入的大小，以便它们始终保持成比例。

【问题讨论】：

我不同意最后的投票。这不是太宽泛，因此不应关闭。众所周知，收音机和复选框很难设置样式，因为浏览器接管了该功能。对于某些浏览器，仅添加高度和宽度只会增加可点击区域的边界，同时在中间留下相同的小复选框/单选框。手头的问题是如何为复选框和单选设置样式。
虽然这个问题不是太宽泛，但已经涵盖了很多。这是一个很好的问题和答案，说明了使用样式标签的方法（使用 CSS3 :checked）：stackoverflow.com/questions/13316966/…。这个想法甚至不显示输入。您可以使标签看起来像任何东西。这是我使用 font awesome 制作的示例：jsfiddle.net/sp39w0t8.
嗨 Joseph，这正是我想要的，感谢您的帮助！
不客气。很高兴我能帮忙。 :) 为了完整起见，我将发布我的评论要点作为答案。

标签： html css forms input

【解决方案1】：

固有的问题是浏览器不喜欢在涉及单选和复选框时更改输入样式。 webkit 尤其会增加边界框，但单选框或复选框本身的大小将保持不变。我见过的最好的方法是使用带有标签的样式技巧。首先，给你的收音机/复选框和标签对应id和for属性。其次，确保标签紧跟标记中的输入。第三，将标签设置为类似于未选中的复选框或单选框。第四，样式input[type=checkbox]:checked + label或与选中状态类似。最后，使用display:none 或类似名称完全隐藏输入。

此方法依赖 CSS3s :checked 伪类，which is IE 9+ 以实现兼容性。结果是一个块级元素，您可以将其设置为类似于复选框的样式，并避免使用浏览器样式进行输入时的挫败感。

这是一个使用这种方法的演示，它具有不同的字体大小：http://jsfiddle.net/m38unvw6/
这是另一个包含更多信息的问题/答案：CSS checkboxes & radio buttons when input is inside label?

【讨论】：

【解决方案2】：

谷歌上的小搜索： Resizing radio button

CSS：

input[type='radio'] {
    transform: scale(2);
}

您可以使用基本的 javascript 或 php 更改值。我会选择 javascript，因为它更容易

【讨论】：

它似乎在 Mac 上的 chrome 或 safari 中不起作用。代码：jsfiddle.net/daudd63u。屏幕截图：i.imgur.com/vcHv29W.png。它确实可以在 Firefox 中使用。