body { font-size:16px; } .con { width:1000px; margin:0 auto; } .con h1 { text-align:center; } h1,h2 { font-weight:normal; color:#0CC; } ul { margin:0; padding:0; list-style:none; } em { font-style:normal; } /*复选*/ .check_box { display:inline-block; position:relative; } .check_box label { width:16px; height:16px; position:absolute; top:0; left:0; border:2px solid #cacaca; border-radius:50%; background:#fff; cursor:pointer; } .check_box label:hover { border:2px solid #f78642; } .check_box label:after { content:''; width:8px; height:4px; position:absolute; top:4px; left:3px; border:2px solid #cacaca; border-top:none; border-right:none; opacity:0.4; transform:rotate(-45deg); /*-webkit-transform:rotate(-45deg); */ } .check_box label:hover:after { border:2px solid #f78642; border-top:none; border-right:none; } .check_box input:checked + label { border:2px solid #f78642; } .check_box input:checked + label:after { opacity:1; border:2px solid #f78642; border-top:none; border-right:none; } .check_box em { margin:0 0 0 5px; } /*单选*/ .radio_box { display:inline-block; position:relative; } .radio_box label { width:15px; height:15px; position:absolute; top:0; left:0; border:2px solid #ef4949; border-radius:50%; background:#fff; cursor:pointer; } .radio_box input:checked + label:after { content:''; width:9px; height:9px; position:absolute; top:3px; left:3px; background:#ef4949; border-radius:50%; } .check_box em { margin:0 0 0 5px; }