发表新帖
发表新帖

Increasing the size of checkbox in HTML

后端 未结
关注
9 1709
一向
一向 2020-12-15 16:55

Is there any way to increase the size of checkbox in HTML?

相关标签:
9条回答
  • 梦如初夏
    2020-12-15 17:39

    A trick for increasing size of HTML checkbox is increase zoom property of input. It is cross browser compatible and also it will adjust the size according to resolution of device.

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

    0 讨论(0)
  • 暗喜
    2020-12-15 17:45

    No. Most browsers ignore the width or height CSS styling of a checkbox. There are two ways around that:

    • Use a label tag so that clicking some other element also triggers the textbox.
    • Make your own checkbox using Javascript, by switching an image and filling a hidden input box.
    0 讨论(0)
  • 被撕碎了的回忆
    2020-12-15 17:48

    One way to do this is to put the checkbox item inside the div element, change the div element size using px. Now set the height and width of the checkbox item to 100% of the div element.

    <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>
    0 讨论(0)
  • 无人及你
    2020-12-15 17:51

    Set the font-size of the checkbox to something like 5em. Worked for me.

    0 讨论(0)
  • 清歌不尽
    2020-12-15 17:52

    One way I changed the checkbox size is by scaling it with CSS:

    input[type=checkbox] {
    transform: scale(2);
    -ms-transform: scale(2);
    -webkit-transform: scale(2);
    padding: 10px;
}
    0 讨论(0)
  • 醉话见心
    2020-12-15 17:52

    This works for me.

    <input type="checkbox" id="check" onclick="checked()" style="width:20px;height:20px;"/>
    0 讨论(0)
 看不清?
提交回复
热议问题