首页 > 代码库 > 纯css单选框
纯css单选框
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); /* IE 9 */ 5 -moz-transform:rotate(-45deg); /* Firefox */ 6 -webkit-transform:rotate(-45deg); /* Safari 和 Chrome */ 7 -o-transform:rotate(-45deg); /* opear */ 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); /* IE 9 */12 -moz-transform:rotate(37deg); /* Firefox */13 -webkit-transform:rotate(37deg); /* Safari 和 Chrome */14 -o-transform:rotate(37deg); /* opear */15 }
2.使用bootstrap时(因为bootstrap中css设置了*box-sizing: border-box;属性,所以会影响定位的位置),需要将bottom下移一个像素;即bottom:2px;
3.效果图
4.总结
之前一直用背景图做这个记住密码单选框,每一次这个框都大差不差,最多就是颜色差异,或者圆角直角的差异,现在用纯css写出来不仅不用每次都要作图,而且还提高了效率。感兴趣的同学可以搜索 pure css icon 看看,感觉很吊的样子。
纯css单选框
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。