对input使用伪类(::after,::before)不显示的解决方法

有时候我们想弄一个多选框或者单选框，但是又不想使用input自带的样式，如下：

首先我想到的是给input添加伪类元素(::before)

.cont_list_item .item_check::before{
    content:" ";
    display:block;
    border:1px #449FDB solid;
    border-radius:50%;
    position:absolute;top:0;left:0;
    width:15px;height:15px;
}

/****选中状态时****/

.cont_list_item .item_check["type=checkbox"]:checked::before{
    background: linear-gradient(to top, #3273C4 0%,#49d9ff 100%);
}

<label class="cont_list_item">
	<input class="item_check" type="checkbox" />
</label>

以上代码放在高版本chrome浏览器是没有问题的，但是放到IE和firefox两个浏览器就不显示了。这里需要注意一点就是input框

就算是再chrome也是有一些不支持的比如输入类的input框就不能设置(::before,::after)伪类只有操作类的可以，有点扯远了，先看看上面的解决办法。

换个思路，我们不纠结input的伪类了，先上代码

.cont_list_item .item_check+.item_check_icon{
    content:" ";
    display:block;
    border:1px #449FDB solid;
    border-radius:50%;
    position:absolute;top:0;left:0;
    width:15px;height:15px;
}


/****选中状态****/

.cont_list .cont_list_item .item_check[type="checkbox"]:checked+.item_check_icon{
    background: linear-gradient(to top, #3273C4 0%,#49d9ff 100%);
}

<label class="cont_list_item">
	<div class="cont_list_checkbox">
		<input class="item_check" type="checkbox" />
		<i class="item_check_icon"></i>
	</div>
</label>

以上带吗我们可以看到我们在input外面套上了另一个div和后面加上了i标签，注意看css代码中有个"+"号，我解释一下，这个符号

是相邻选择器的意思，如果你们看过weui的选择框样式应该就明白，选中的是某标签相邻的后一个，(记住！是后一个相邻元素，不是后面所有)，现在我们是对i标签.item_check_icon操作而不是对.item_check元素的伪类了，所以现在IE10以上和firefox浏览器是可以兼容了的。