html复选框不可修改,如何用【伪类】成功修改HTML checkbox默认样式？（新checkbox覆盖老checkbox无法点击的问题）...

按照一篇博客上的指导，修改checkbox默认样式：

(博客地址： https://www.cnblogs.com/GumpY... )

效果图：

按照博客，我的意图是：

1-把原checkbox 的透明度设置0(透明)、z-index设为2(层级比自己画的checkbox高)

2-用伪类自己制一个checkbox(这个简单，边线设置一下就行)

3-再用伪类(关联原checkbox选中)做一个checkbox选中的状态(有底色、有勾号)

OK，代码如下：

input[type="checkbox"] {

opacity: 0;

z-index: 2;

}

label.chbox_label:before {

content: '';

position: absolute;

top: 1px;

left: -22px;

width: 15px;

height: 15px;

border: 1px #DCDCDC solid;

border-radius: 2px;

}

input[type="checkbox"]:checked+label:after {

content: '';

position: absolute;

top: 1px;

left: -22px;

width: 15px;

height: 15px;

background: url("../yhe_resource/nike.png") no-repeat center #00BEBE;

border-radius: 2px;

}

但是.............

=======(以下是实际效果)========================

1-首先如我所愿，新checkbox盖在老checkbox之上了; 但是，真的是“盖上了”，我点不到老checkbox，导致选中的效果出不来

2-于是我只好console里把新checkbox移开，这下能点了！

3-然而，再次点击选中的checkbox，并不会回到框框的状态....

======================

求解 TT....