checkbox、radio样式小技巧

对于input中checkBox和radio,一般都是使用javascript控制其选中后的样式。在css有了“:checked”伪类选择器后,还能这么玩。

//css
.checkBox-container{
    position: relative;
}
.checkBox-container .checkBox-item{
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.checkBox-container .checkBox-label::before{
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #999;
    border-radius: 50%;
}
.checkBox-container .checkBox-item:checked + .checkBox-label::before{
    content: "√";
    background: #0099ff;
    color: #fff;
}
//html
Box-container"> Box" class="checkBox-item">

相关文章

这个问题和curl无法访问https资源是类似的,现在curl可以访问https资源,但是使用pecl安装扩展的时候不行...
在浏览器输入chrome://flags/回车,找到Omnibox UI Hide Steady-State URL Scheme and Trivial Subdoma...
方法一: 我们都知道Ubuntu有一个专门用来安装软件的工具apt,我们可以用它来全自动安装arm-linux-gcc。...
中文的windows下的cmd默认使用GBK的编码,敲代码时,页面使用的是UTF-8(65001),而powershell控制台默认...
提示错误: arm-linux-gcc:Command not found PATH里有/usr/oca/arm/bin,但是make的时候,就是找不到 a...
我在Graph API开发中用的最多的测试工具就是Graph Explore,这个是微软开发的网页版的Graph API的测试工...