创建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,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M14 18L26 6l4 4-16 16L4 16l4-4z"/></svg>');
  background-size: 100%;
}

<label>
  Click me:
  <input type="checkBox" />
  <span></span>
</label>

原文地址：https://www.jb51.cc/css/217393.html