复选框大小增加答案

【问题标题】：CheckBox size increase复选框大小增加
【发布时间】：2022-02-03 03:40:21
【问题描述】：

我想增加输入收音机的宽度和高度。但是当我执行以下 CSS 样式时，它会使单选框周围的字段宽度增加。

   input[type="checkbox"]{
  width: 30px; /*Desired width*/
  height: 30px; /*Desired height*/
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

这里有什么问题。我只是想增加无线电输入的圆形大小

谢谢

【问题讨论】：

标签： javascript angularjs html css checkbox

【解决方案1】：

无法更改原生单选框和复选框输入的宽度/高度。这是大多数浏览器的限制（有些确实支持更改这些输入的大小，但它不是跨浏览器）。您应该考虑使用库或 jquery 插件来执行此操作，我所看到的大部分内容都是通过使用看起来像这些输入的图像并模拟隐藏在幕后的原始输入来完成的。

【讨论】：

【解决方案2】：

你可以使用转换属性

    transform: scale(2,2);

它可能在某些浏览器中不起作用，因此请使用 -webkit-、-moz- 或 -o-，而较大的 scale 值可能会使其看起来像去像素化。..

【讨论】：

【解决方案3】：

操作复选框元素的简短风格：

<input type="checkbox" style="width:20px;height:20px">

<!--you can use "radio" for radio button type-->
<input type="checkbox" style="width:30px;height:30px">

codepen for dynamic rendering

【讨论】：