纯css单选框

1.没有用bootstrap时：

.has_sel,.un_sel{display:block; width:16px; height: 16px; border: 1px solid #B06A50; border-radius: 1px; position: relative; }
.has_sel:before{content: ""; width: 2px; height: 6px; background-color: #B06A50; border-radius: 1px; position: absolute; left: 4px; bottom: 3px;
transform:rotate(-45deg);
-ms-transform:rotate(-45deg);     /* IE 9 */
-moz-transform:rotate(-45deg);     /* Firefox */
-webkit-transform:rotate(-45deg); /* Safari 和 Chrome */
-o-transform:rotate(-45deg);  /* opear */
}
.has_sel:after{content: ""; width: 2px; height: 10px; background-color: #B06A50; border-radius: 1px; position: absolute; left: 8px; bottom: 3px;
transform:rotate(37deg);
-ms-transform:rotate(37deg);     /* IE 9 */
-moz-transform:rotate(37deg);     /* Firefox */
-webkit-transform:rotate(37deg); /* Safari 和 Chrome */
-o-transform:rotate(37deg);  /* opear */
}

2.使用bootstrap时（因为bootstrap中css设置了*box-sizing: border-box;属性，所以会影响定位的位置），需要将bottom下移一个像素；即bottom：2px；

3.效果图



4.总结

之前一直用背景图做这个记住密码单选框，每一次这个框都大差不差，最多就是颜色差异，或者圆角直角的差异，现在用纯css写出来不仅不用每次都要作图，而且还提高了效率。感兴趣的同学可以搜索 pure css icon 看看，感觉很吊的样子。