纯css单选框
CSS 单选框
2023-09-11 14:15:07 时间
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 看看,感觉很吊的样子。
相关文章
- [转] 使用babel-plugin-react-css-modules简化CSS Modules的使用
- Css & JavaScript & jquery 实现选项卡的制作
- Atitit.css 规范 bem 项目中 CSS 的组织和管理
- 【Css/Html】网页Css默认设计样式载入模板代码body.css
- 【CSS】css弹出菜单设置示例
- 【Css】fontSize最小字体12px,如何还能再小?(已解决)
- 每日一学—CSS cursor 属性
- CSS
- CSS基本布局——grid布局
- 如何用纯 CSS 创作出平滑的层叠海浪特效
- CSS学习:overflow:hidden解决溢出,坍塌,清除浮动
- webpack4+(打包后的文件分析+脚本打包+HTML插件+样式处理CSS+Less+css抽离压缩)
- CSS_css sprite原理优缺点及使用
- 浅析如何给css加上模块的功能以及CSS Modules用法介绍
- css Table布局:基于display:table的CSS布局
- CSS魔法堂:改变单选框颜色就这么吹毛求疵!
- CSS学习知识整理(四)Css 盒子模型
- CSS学习知识整理(一)Css 布局
- Material UI:很强大的CSS框架
- 关于css的touch-action属性