创建CSS以扩大复选框?

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

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

我试图在几页上将我的复选框大小加倍。 我如何使这在CSS中发生? 我不想用hover。

有什么办法吗?

提问于
用户回答回答于

你可以始终使用checkbox hack来制作你自己的复选框。这允许一个更跨浏览器兼容的解决方案。

我做了一个简单的演示,很明显,你必须得到一个透明的.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>

用户回答回答于

若要使复选框的大小加倍,可以使用CSSScale属性。(2,2)是指宽度的2倍和原始高度的2倍,但这将是相当大的。

input[type="checkbox"] {
  transform:scale(2, 2);
}

对于稍微大一点的复选框,你也可以使用十进制值。

input[type="checkbox"] {
      transform:scale(1.3, 1.3);
    }

扫码关注云+社区