css - input勾选框样式

html代码：

<div class="agreement-border"><input type="checkbox" id="register-agreement" class="agreement" name="agreement" onclick="checkboxChecked(this);"><div></div></div>

css代码：

.agreement-border {    border: 1px solid #32425b;    float: left;    height: 12px;    margin-right: 26px;    position: relative;    width: 12px;}.agreement-border div {    background: url("globals/gou.png") no-repeat;    display: none;    height: 18px;    margin: -2px;    position: absolute;    top: -1px;    width: 18px;}<pre name="code" class="html">.agreement-border .agreement {    height: 16px;    margin: -2px;    position: relative;    width: 16px;    z-index: 99;    opacity: 0; /*Chrome、Safari、Firefox、Opera */     filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); /* IE6/IE7/8 */     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*  IE8 */ }

js代码：

/** * checkbox勾选样式 */function checkboxChecked(t) {if(t.checked == true){$(t).next().show();}else{$(t).next().hide();}}

结果：