解决checkbox样式的问题

（这里是小透明，与checkbox无关）改变input框占位字placeholder属性:

<span style="color:#999999;">input::-webkit-input-placeholder{}
input::-moz-placeholder{}
input::-ms-input-placeholder{}
</span>

关于checkbox和radio的样式真的很头痛，一开始我天真地以为用 appearance:none可以把原有的样式覆盖了。

input[type="checkbox"]
{
 -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

然而太傻- -

目前只兼容 Webkit 系列浏览器啊心塞.那我该怎么自定义?

原有样式可以直接用<label>元素挡住啊:

        <div class="check-box"><input id="id-7" type="checkbox"><label for="id-7"></label></div>

input[type="checkbox