创建 CSS 以放大复选框 [英] Create CSS to enlarge checkboxes
本文介绍了创建 CSS 以放大复选框的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试将几页上的复选框的大小加倍.我如何在 CSS 中实现这一点?我不想设置悬停样式.
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.
想法?
推荐答案
您始终可以使用复选框技巧来创建自己的复选框.这提供了一个更加跨浏览器兼容的解决方案.
You could always use the checkbox hack to make your own checkbox. This allows for a much more cross browser compatible solution.
我在这里做了一个快速演示,显然你必须得到一个透明的.png勾选,不是我得到的那个.
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屋!
查看全文