如何改变Checkbox的尺寸大小

SJY发表于:2016年12月20日 11:35 • 阅读:

比较复杂的方法

input[type=checkbox]
{
  /* Double-sized Checkboxes */
  -ms-transform: scale(2); /* IE */
  -moz-transform: scale(2); /* FF */
  -webkit-transform: scale(2); /* Safari and Chrome */
  -o-transform: scale(2); /* Opera */
  padding: 10px;
}

/* Might want to wrap a span around your checkbox text */
.checkboxtext
{
  /* Checkbox text */
  font-size: 110%;
  display: inline;
}
<input  type="checkbox" name="optiona" id="opta" checked />
<span class="checkboxtext">
  Option A
</span>
<input type="checkbox" name="optionb" id="optb" />
<span class="checkboxtext">
  Option B
</span>
<input type="checkbox" name="optionc" id="optc" />
<span class="checkboxtext">
  Option C
</span>

兼容绝大多数主流浏览器的方法

input[type=checkbox] {
  transform: scale(1.5);
}

用属性zoom解决

input[type=checkbox] {
    zoom: 1.5;
}

参考文献:http://stackoverflow.com/questions/306924/checkbox-size-in-html-css

欢迎转载,但请保留原文地址 http://www.sjyhome.com/css/checkbox-size-set.html

回复(0)