<!DOCTYPE html><html><head> ???<meta charset="utf-8"> ???<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> ???<title>Examples</title> ???<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport"/> ???<meta name="description" content=""> ???<meta name="keywords" content=""> ???<link href="" rel="stylesheet"></head><style>.checkbox { ???position: relative; ???height: 30px;}.checkbox input[type=‘checkbox‘] { ???position: absolute; ???left: 0; ???top: 0; ???width: 20px; ???height: 20px; ???opacity: 0;}.checkbox label { ???position: absolute; ???left: 30px; ???top: 0; ???height: 20px; ???line-height: 20px;}.checkbox label:before { ???content: ‘‘; ???position: absolute; ???left: -30px; ???top: 0; ???width: 20px; ???height: 20px; ???border: 1px solid #ddd; ???border-radius: 50%; ???transition: all 0.3s ease; ???-webkit-transition: all 0.3s ease; ???-moz-transition: all 0.3s ease;}.checkbox label:after { ???content: ‘‘; ???position: absolute; ???left: -22px; ???top: 3px; ???width: 6px; ???height: 12px; ???border: 0; ???border-right: 1px solid #fff; ???border-bottom: 1px solid #fff; ???background: #fff; ???transform: rotate(45deg); ???-webkit-transform: rotate(45deg); ???-moz-transform: rotate(45deg); ???-ms-transform: rotate(45deg); ???transition: all 0.3s ease; ???-webkit-transition: all 0.3s ease; ???-moz-transition: all 0.3s ease;}.checkbox input[type=‘checkbox‘]:checked + label:before { ???background: #4cd764; ???border-color: #4cd764;}.checkbox input[type=‘checkbox‘]:checked + label:after { ???background: #4cd764;}</style><body><div class=‘checkbox‘> ???<input type=‘checkbox‘ id=‘checkbox1‘ name=‘checkboox[]‘> ???<label for=‘checkbox1‘>篮球</label></div><div class=‘checkbox‘> ???<input type=‘checkbox‘ id=‘checkbox2‘ name=‘checkboox[]‘> ???<label for=‘checkbox2‘>乒乓球</label></div><div class=‘checkbox‘> ???<input type=‘checkbox‘ id=‘checkbox3‘ name=‘checkboox[]‘ checked> ???<label for=‘checkbox3‘>足球</label></div></body></html>input 的带有lable的选择样式优化 纯css
原文地址：http://www.cnblogs.com/ghfjj/p/7954878.html