单选框、复选框 自定义样式----------关键属性无注释说明，可调试自觉添加

/*radio与checkbox*/
[type="radio"]:not(:checked),
[type="radio"]:checked {position: absolute; left: -9999px; }
[type="radio"]:not(:checked)+ label,
[type="radio"]:checked+ label {position: relative; padding-left: 22px; cursor: pointer; padding-right: 6px; }
[type="radio"]:not(:checked)+ label:before,
[type="radio"]:checked+ label:before {content: ''; position: absolute; left: 2px; top: 3px;  13px; height: 13px; border: 1px solid #aaa; background: #0d3466; border-radius: 30px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3); line-height: 150%; font-size: 12px; border: 1px solid #5ebeff; }
.cssVal{border: 1px solid #5ebeff; }
[type="radio"]:not(:checked)+ label:after,
[type="radio"]:checked+ label:after {display: block;  7px; height: 7px; border-radius: 50%; content: ' '; position: absolute; top: 7px; left: 6px; background: #5ebeff; transition: all .2s; }
[type="radio"]:not(:checked)+ label:after {opacity: 0; transform: scale(0); }
[type="radio"]:checked+ label:after {opacity: 1; transform: scale(1); }
[type="radio"]:disabled:not(:checked)+ label:before,
[type="radio"]:disabled:checked+ label:before {box-shadow: none; border-color: #bbb; background-color: #ddd; }
[type="radio"]:disabled:checked+ label:after {color: #999; }
[type="radio"]:disabled+ label {color: #aaa; }
[type="radio"]:checked:focus+ label:before,
[type="radio"]:not(:checked):focus+ label:before {}
[type="radio"]:not(:checked), [type="radio"]:checked {position: absolute; left: -9999px; } 

[type="checkbox"]:not(:checked), [type="checkbox"]:checked {position: absolute; left: -9999px; }
.tableStyleWordWrap [type="checkbox"]:not(:checked),
.tableStyleWordWrap [type="checkbox"]:checked {position: absolute; padding-left: 0; left: 0; margin-left: -1px; }
.tableStyleWordWrap input[type="checkbox"]:before{content:""; position: absolute; top: -1px; left: 9999px;  12px; height: 12px; border: 1px solid #fff; background-color: transparent;border-radius: 2px;}
[type="checkbox"]:not(:checked)+ label,
[type="checkbox"]:checked+ label {position: relative; padding-left: 25px; cursor: pointer; }
.tableStyleWordWrap [type="checkbox"]:not(:checked),
.tableStyleWordWrap [type="checkbox"]:checked {position: relative; padding-left: 25px; cursor: pointer;left: -10000px;}
[type="checkbox"]:not(:checked)+ label:before{content: ''; position: absolute; left: 4px; top: 3px;  13px; height: 13px; background: #0d3466; border-radius: 2px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3); line-height: 150%; border: 1px solid #5ebeff; }
.tableStyleWordWrap [type="checkbox"]:not(:checked) :before{content: ''; position: absolute; left: -2px; top: -2px;  13px; height: 13px; background: #fff; border-radius: 2px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3); line-height: 150%; border: 1px solid #ccc; }
[type="checkbox"]:checked+ label:before {content: ''; position: absolute; left: 4px; top: 3px;  13px; height: 13px; background: #0d3466; border-radius: 2px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3); line-height: 150%; border: 1px solid #5ebeff; }
.tableStyleWordWrap [type="checkbox"]:checked:before {content: ''; position: absolute; left: 9999px; top: -1px;  12px; height: 12px;background-color: transparent; border-radius: 2px; /*box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3);*/ line-height: 150%; border: 1px solid #fff; }
[type="checkbox"]:not(:checked)+ label:after,
[type="checkbox"]:checked+ label:after {content: '✔'; position: absolute; top: 2px; left: 6px; font-size: 12px; color: #fff; transition: all .2s; line-height: 150%; }
.tableStyleWordWrap [type="checkbox"]:not(:checked):after,
.tableStyleWordWrap [type="checkbox"]:checked:after {content: '✔'; position: absolute; top: -2px; left: 10001px; font-size: 12px; color: #fff; transition: all .2s; line-height: 150%; }
[type="checkbox"]:not(:checked)+ label:after {opacity: 0; transform: scale(0); }
.tableStyleWordWrap [type="checkbox"]:not(:checked):after {opacity: 0; transform: scale(0); }
[type="checkbox"]:checked+ label:after {opacity: 1; transform: scale(1); }
.tableStyleWordWrap [type="checkbox"]:checked:after {opacity: 1; transform: scale(1); }
[type="checkbox"]:disabled:not(:checked)+ label:before,
[type="checkbox"]:disabled:checked+ label:before {box-shadow: none; border-color: #bbb; background-color: #ddd; }
.tableStyleWordWrap [type="checkbox"]:disabled:not(:checked):before,
.tableStyleWordWrap [type="checkbox"]:disabled:checked:before {box-shadow: none; border-color: #bbb; background-color: #ddd; }
[type="checkbox"]:disabled:checked+ label:after {color: #999; }
.tableStyleWordWrap [type="checkbox"]:disabled:checked:after {color: #999; }
[type="checkbox"]:disabled+ label {color: #aaa; }
.tableStyleWordWrap [type="checkbox"]:disabled+ label {color: #aaa; }
[type="checkbox"]:checked:focus+ label:before,
[type="checkbox"]:not(:checked):focus+ label:before {}

/*radio与checkbox*/