Question

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

Answer 1

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

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

Answer 2

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

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

现在，使用:checked伪选择器，您也可以创建一个label元素。

Answer 3

这适合我。

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

Answer 4

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

使用label标记，以便点击其他元素也会触发文本框。
使用Javascript创建自己的复选框，方法是切换图像并填充隐藏的输入框。

Answer 5

我搜索了很多，最后我创建了一个自定义checkbox.Code是

  <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>

Answer 6

试试这个：

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;
    }

<input type="checkbox" />

Answer 7

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

＆＃13;

.daysCheckbox1{
zoom:1;

}
.daysCheckbox2{
zoom:1.5;

}
.daysCheckbox3{
zoom:2;

}
.daysCheckbox4{
zoom:2.5;

}

＆＃13;

<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>

＆＃13;

Answer 8

一种方法是将复选框项放在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>

Answer 9

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

Answer 10

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

增加HTML中复选框的大小

10 个答案: