创建CSS以放大复选框 [英] Create CSS to enlarge checkboxes

问题描述

我试图在几个页面上加倍我的复选框的大小。我如何在CSS中发生这种情况？

解决方案

p>你总是可以使用复选框hack来创建自己的复选框。这允许更多的跨浏览器兼容的解决方案。

我做了一个快速演示这里，显然你必须得到一个透明的.png，而不是我得到的。

  input [type = checkbox]：checked〜div label {
 background：url（http://ramyasspace.files.wordpress.com/2011/06/tick.jpg）; 
 background-size：100％; 
} 
  

---

 < label&点击我：< input type =checkbox/> < span>< / span>< / label>  

I am trying to double the size of my checkboxes on a few pages. How do I make that happen in CSS? I don't want to style the hover.

Ideas?

解决方案

You could always use the checkbox hack to make your own checkbox. This allows for a much more cross browser compatible solution.

I made a quick demo here, obviously you would have to get a transparent .png of a tick, not the one I got.

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>

这篇关于创建CSS以放大复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！