纯css单选框

IT/互联网 / 编程语言 养生小编 来源:互联网 153浏览 0评论

1.没有用bootstrap时:

 1 .has_sel,.un_sel{display:block; width:16px; height: 16px; border: 1px solid #B06A50; border-radius: 1px; position: relative; } 2         .has_sel:before{content: ""; width: 2px; height: 6px; background-color: #B06A50; border-radius: 1px; position: absolute; left: 4px; bottom: 3px; 3              transform:rotate(-45deg); 4             -ms-transform:rotate(-45deg);      5             -moz-transform:rotate(-45deg);      6             -webkit-transform:rotate(-45deg);  7             -o-transform:rotate(-45deg);   8         } 9         .has_sel:after{content: ""; width: 2px; height: 10px; background-color: #B06A50; border-radius: 1px; position: absolute; left: 8px; bottom: 3px;10              transform:rotate(37deg);11             -ms-transform:rotate(37deg);     12             -moz-transform:rotate(37deg);     13             -webkit-transform:rotate(37deg); 14             -o-transform:rotate(37deg);  15         }

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

3.效果图

技术分享

4.总结

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

纯css单选框

原文:http://www.cnblogs.com/codebook/p/5919500.html