原用html自带的checkbox可是样式不美观使用css倒是可以修改，可过程复杂代码量大不适合入门级开发者。
使用a标签代替了选择框，给a的样式设置一个默认背景图片，判断点击时添加一个样式覆盖默认图片
灰色是默认图片 选中则是覆盖的样式图。（可以根据产品图片大小，设置包裹元素的高度）
<div class="radioSp"><a class="check-btn"></a></div>
.radioSp { width: 10%; height: 7.5em; float: left; text-align: center; }
.check-btn{width: 3em; height:3em; background-image:url(img/check.png);background-size: 3em; display: block; }
.checked{background-image:url(img/checked.png); } （这里是点击后元素添加的class）
根据内容垂直居中需在包裹元素设置position: relative; 。按钮元素设置 position:absolute;相对定位，translate是css3属性。根据w3c的介绍transform: translate（）：通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标）。
值 translate(-50%,-50%) 把元素从左侧移动 50 像素，从顶端移动 100 像素。
html部分如上。
.radioSp{ width: 10%; height: 150px; float: left; text-align:center; position: relative;}
.check-btn{width: 3em; height:3em; background-image:url(img/check.png);background-size: 3em; position:absolute;left:50%;top:50%;transform: translate(-50%,-50%);}
.checked{background-image:url(img/checked.png); }
