有关HTML / CSS中的复选框大小?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (502)

是否可以使用CSS或HTML设置复选框的大小?

widthsize在IE6+下工作,但不适用于Firefox,即使我设置较小的尺寸,复选框也保持16x16。

提问于
用户回答回答于

2017年版本:https://jsfiddle.net/ksvx2txb/11/

浏览器将使用CSS缩放功能,如果不支持,将使用Transform:Scale。

为什么不用变换?它在一些浏览器上看起来很难看,包括Mac上的Chrome。

Chrome - 工作 Firefox (mac) - 工作 Opera - 工作 Edge - 工作

Firefox (win) - 大,模糊! Safari - 大,模糊!

@supports (zoom:2) {
	input[type="radio"],  input[type=checkbox]{
	zoom: 2;
	}
}
@supports not (zoom:2) {
	input[type="radio"],  input[type=checkbox]{
		transform: scale(2);
		margin: 15px;
	}
}
label{
  /* fix vertical align issues */
	display: inline-block;
	vertical-align: top;
	margin-top: 10px;
}
<input type="radio" name="aa" value="1" id="aa" checked /> 
<label for="aa">Radio 1</label>
<br />
<input type="radio" name="aa" value="2" id="bb" /> 
<label for="bb">Radio 2</label>

<br /><br />

<input  type="checkbox" name="optiona" id="cc" checked /> 
<label for="cc">Checkbox 1</label>
<br />
<input  type="checkbox" name="optiona" id="dd" /> 
<label for="dd">Checkbox 1</label>

用户回答回答于

一个简单的解决方案是使用以下属性zoom:

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

所属标签

可能回答问题的人

  • 应用案例分享

    1 粉丝490 提问19 回答
  • 学生

    3 粉丝476 提问13 回答
  • uncle_light

    5 粉丝518 提问12 回答
  • 最爱开车啦

    8 粉丝503 提问12 回答

扫码关注云+社区

领取腾讯云代金券