增加 HTML 中复选框的大小答案

【问题标题】：Increasing the size of checkbox in HTML增加 HTML 中复选框的大小
【发布时间】：2012-01-04 17:57:12
【问题描述】：

有没有办法增加 HTML 中复选框的大小？

【问题讨论】：

有没有办法增加 CSS 或 javascript 中复选框的大小？
这里也发布了很多非常有用的想法：stackoverflow.com/q/306924/469643

标签： html

【解决方案1】：

我更改复选框大小的一种方法是使用 CSS 对其进行缩放：

input[type=checkbox] {
    transform: scale(2);
    -ms-transform: scale(2);
    -webkit-transform: scale(2);
    padding: 10px;
}

【讨论】：

在许多情况下简单而有用，您要做的就是匹配字体大小。

【解决方案2】：

不是以简单的跨浏览器方式。

您将获得最大的灵活性，将其替换为使用 JavaScript 和 CSS 的控件。使用标准复选框作为后备。

如今，使用 :checked 伪选择器，您也可以创建一个 label 元素来执行此操作。

【讨论】：

有没有办法增加 CSS 或 javascript 中复选框的大小？
不要使用 JS。你可以考虑this link。正如@Sjoerd 所建议的，这是一个非常有趣的解决方法

【解决方案3】：

这对我有用。

<input type="checkbox" id="check" onclick="checked()" style="width:20px;height:20px;"/>

【讨论】：

【解决方案4】：

没有。大多数浏览器会忽略复选框的宽度或高度 CSS 样式。有两种解决方法：

使用label标签，这样点击其他元素也会触发文本框。
使用 Javascript 制作您自己的复选框，方法是切换图像并填充隐藏的输入框。

【讨论】：

【解决方案5】：

增加 HTML 复选框大小的一个技巧是增加输入的缩放属性。它是跨浏览器兼容的，并且它会根据设备的分辨率调整大小。

.daysCheckbox1{
zoom:1;

}
.daysCheckbox2{
zoom:1.5;

}
.daysCheckbox3{
zoom:2;

}
.daysCheckbox4{
zoom:2.5;

}

<label> Checkbox 1<input type="checkbox" class="daysCheckbox1"   name="Monday"></label><Br>
<label> Checkbox 2<input type="checkbox" class="daysCheckbox2"   name="Monday"></label><Br>
<label> Checkbox 3<input type="checkbox" class="daysCheckbox3"   name="Monday"></label><Br>
<label> Checkbox 4<input type="checkbox" class="daysCheckbox4"   name="Monday"></label><Br>

【讨论】：

zoom is a non-standard CSS property 在 Firefox 中不起作用。

【解决方案6】：

我搜索了很多，最后我创建了一个自定义复选框。代码是

  <script type="text/javascript" src="jquery.js"></script>
       <script type="text/javascript">
     $(document).ready(function(){
    $(".CheckBoxClass").change(function(){
    if($(this).is(":checked")){
        $(this).next("label").addClass("LabelSelected");
    }else{
        $(this).next("label").removeClass("LabelSelected");
    }
});
          });
       </script>

风格是

     .CheckBoxLabelClass{
    background: url("uncheck222.png") no-repeat;
    padding-left: 5px;
    padding-top: 3px;
    padding-right: 10px;
    margin: 5px;
    height: 60px;   
    width: 60px;
    display: block;
}
.CheckBoxLabelClass:hover{
    text-decoration: underline;
}
.LabelSelected{
     background: url("check1111.png") no-repeat; 
    padding-left: 5px;
    padding-top: 3px;
    padding-right: 10px;
    margin: 5px;
    height: 60px;   
    width: 60px;
    display: block;

}

复选框代码是：

    <input id="CheckBox1" type="checkbox" class="CheckBoxClass"/>
            <label id="Label1" for="CheckBox1" class="CheckBoxLabelClass"></label>

【讨论】：

【解决方案7】：

这样做的一种方法是将复选框项目放在 div 元素内，使用 px 更改 div 元素的大小。现在将复选框项目的高度和宽度设置为 div 元素的 100%。

<style>
    *Reset*
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
   *Changing the height of the body for better view*
    body {
        height: 1000px;
    }
    *Increasing the height and width of the div element*
    div {
        width: 100px;
        height: 100px;
        background-color: brown;
        margin: auto;
        margin-top: 100px;
    }
  *setting the height and width of the input to 100% of the div element*
    input {
        height: 100%;
        width: 100%;
    }
</style>

<body>
   <div>
      <input type="checkbox" name="" id="">
   </div>
</body>

【讨论】：

【解决方案8】：

试试这个：

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

或

.CbxSizer {
  zoom: 8;
  transform: scale(4);
  -ms-transform: scale(4);
  -webkit-transform: scale(4);
  -o-transform: scale(4);
  -moz-transform: scale(4);
  transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
}

<div class="CbxSizer">
  <input type="checkbox" name="hello" value="1">
</div>

或

    input[type='checkbox'] {
        -webkit-appearance:none;
        width:40px;
        height:40px;
        background:white;
        border-radius:6px;
        border:3px solid #445;
    }
    input[type='checkbox']:checked {
        background: #abd;
    }

&lt;input type="checkbox" /&gt;

【讨论】：

【解决方案9】：

你可以创建一个自定义复选框，其中 2 个图像在 tou 上相互切换

【讨论】：

你到底是什么意思，你会怎么做？显示一些代码。这种形式的答案贡献不够。编辑后在评论中提及我，以便我可以删除我的反对票。

【解决方案10】：

将复选框的字体大小设置为 5em。为我工作。

【讨论】：