* { margin:0; padding:0; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; text-decoration:none; list-style:none; -webkit-touch-callout:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; -webkit-appearance:none; -webkit-font-smoothing:antialiased; font-family:"microsoft yahei",Arial,Helvetica,sans-serif; } .max_box { width:100%; height:100%; background-color:black; position:absolute; } input[type='checkbox'] { width:0; } .wrapper { width:580px; height:130px; margin:100px auto; padding:0 20px; } .wrapper > h3 { font-size:16px; color:snow; } li { width:120px; height:50px; float:left; padding:12px 0; } li:nth-child(4n+1) ~ li:nth-child(4n+3) { margin-left:20px; } label { width:125px; height:32px; display:block; cursor:pointer; } .check_container { width:18px; height:18px; border:1px solid snow; float:left; margin-top:6px; position:relative; } input[type='checkbox']:checked + .check_container:before { content:''; position:absolute; width:3px; height:10px; border-right:2px solid snow; border-bottom:2px solid snow; transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); left:6px; } input[type='checkbox']:checked + .check_container + span { color:lightseagreen; } h3 + ul label > span { display:block; float:left; width:107px; height:30px; line-height:30px; color:hotpink; text-align:left; font-size:16px; padding-left:12px; }