css复选框如何调大一些,创建CSS放大复选框

您可以随时使用复选框来勾选自己的复选框.这允许更多的跨浏览器兼容的解决方案.

我做了一个快速演示here,显然你必须得到一个透明的.png的滴答,而不是我得到的.

input[type=checkBox]:checked ~ div label{

background: url(http://ramyasspace.files.wordpress.com/2011/06/tick.jpg);

background-size: 100%;

}

input {

display: none;

}

label input[type=checkBox] ~ span {

display: inline-block;

vertical-align: middle;

cursor: pointer;

background: #fff;

border: 1px solid #888;

padding: 1px;

height: 20px;

width: 20px;

}

label input[type=checkBox]:checked ~ span {

/* image: Picol.org,cc-by 3.0,https://commons.wikimedia.org/wiki/File:Accept_Picol_icon.svg */

background: url('data:image/svg+xml;utf8,');

background-size: 100%;

}

Click me: