单input标签+纯css自定义checkbox和radio样式

都知道input type类型为 checkbox和radio的默认样式非常丑陋,并且在不同的平台上显示的效果不同,网上有很多自定义样式的方法,但我认为都比较麻烦,有的需要两个标签,有的需要配合js.以下是我的方法,核心是:appearance,::after,::before

这是要实现的效果:

HTML代码:

      

        
          营业中
        
        
          暂停营业
        
      

CSS代码

input.icon-checked {
      position: relative;
      width: .3rem;         //显示为20px,实际为30px,方便触摸
      height: .3rem;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
    }
    input.icon-checked:after {
      display: inline-block;
      width: .2rem;
      height: .2rem;
      content: '';
      vertical-align: middle;
      border: 3px solid #b4b4b4;
    }
    input.icon-checked:checked:before {
      font-size: 32px;
      position: absolute;
      top: -.08rem;
      left: -.05rem;
      content: '\e613';
      color: #d11d1d;
    }

兼容性:

image

现代浏览器大部分支持或支持其替代属性,IE9等CSS3未完全支持的浏览器兼容性有问题

---

另外,

可以在content中写svg,就不需要设置字体图标了,更加纯粹的纯css,如:

image.png