跨浏览器工作的更大的复选框？

Question

我已经看到很多尝试解决方案。我试图通过支持IE9 +主流浏览器来增加复选框的大小。

我最接近的解决方案是使用了变换比例属性，但它看起来很糟糕。

此主题的许多问题都已过时。

这有什么成功吗？

由于

Answer 1

这是我想象通过CSS自定义复选框的最简单方法。

label {
	display:inline-block;
	width:30px;
	height:30px;
	border:1px solid #000;
}

div {
	position:relative;
}

input:checked + label {
	background:red;
}

input {
	opacity:0;
	position:absolute;
}

<div>
	<input id=chk type="checkbox">
	<label for="chk"></label>
</div>