创建CSS以放大复选框

Question

我试图在几页上将复选框的大小加倍.我如何在CSS中实现这一点？我不想设置悬停的样式.

想法？

Answer 1

要使复选框的大小加倍,可以使用CSS scale属性.(2,2)表示原件宽度的2倍和高度的2倍,但这将是非常大的.

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

您也可以使用十进制值,只需稍微大一点的复选框.

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

Answer 2

样式复选框是有风险的业务.这是所有浏览器似乎永远不会一致的事情之一.

或者你可以试试

 style="zoom:1.2"

jQuery提供了一个插件来替换复选框

Answer 3

您可以随时使用复选框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>

Answer 4

这有效.它使用相对大小,因此它会与您当前的字体大小进行缩放.

input[type="checkbox"] {
  width: 1.2em;
  height: 1.2em;
}

您可能需要调整边距.