增加大小 checkbox 在 HTML

赞同来自:

调整大小的一种方法 checkbox - 它缩放它 CSS:

input[type=checkbox] {

 transform: scale/2/;

 -ms-transform: scale/2/;

 -webkit-transform: scale/2/;

 padding: 10px;

}

小姐请别说爱

赞同来自:

不是简单的横梁意识。

通过使用控制元素替换它，您将获得最大的灵活性 JavaScript 和 CSS. 使用标准 checkbox 作为备用选项。

如今在伪部门的帮助下

:checked

您还可以创建一个项目。

label

.

詹大官人

赞同来自:

这个对我有用。

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

石油百科

赞同来自:

不，大多数浏览器忽略风格 CSS 宽度或高度 checkbox. 有两种方法可以绕过它：

使用标记

label

, 要单击任何其他元素还会启动标记 textbox.

做你自己的 checkbox 通过 Javascript, 切换图像并填写隐藏的输入字段。

冰洋

赞同来自:

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

<script src="jquery.js" type="text/javascript"></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;



}

代码 checkbox 是一个：

<input class="CheckBoxClass" id="CheckBox1" type="checkbox"/>

<label class="CheckBoxLabelClass" for="CheckBox1" id="Label1"></label>

小姐请别说爱

赞同来自:

提高尺寸的技巧 HTML checkbox - 这是输入缩放属性的增加。
它与跨浏览器兼容，还将根据设备的分辨率调整大小。

.daysCheckbox1{

zoom:1;



}

.daysCheckbox2{

zoom:1.5;



}

.daysCheckbox3{

zoom:2;



}

.daysCheckbox4{

zoom:2.5;



}

<label> Checkbox 1<input class="daysCheckbox1" name="Monday" type="checkbox"/></label><br/>

<label> Checkbox 2<input class="daysCheckbox2" name="Monday" type="checkbox"/></label><br/>

<label> Checkbox 3<input class="daysCheckbox3" name="Monday" type="checkbox"/></label><br/>

<label> Checkbox 4<input class="daysCheckbox4" name="Monday" type="checkbox"/></label><br/>

诸葛浮云

赞同来自:

一种方法来制作它 - 放一个元素 checkbox 内部元素 div, 调整元素的大小 div 通过 px.
现在设置元素的高度和宽度 checkbox 在 100% 元素 div.

<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 id="" name="" type="checkbox"/>

</div>

</body>