web前端|css教程
CSS3 单选 复选 按钮
web前端-css教程
众所周知，表单中的一写元素原生样式不是很好看，项目中用到的时候需要优化，下面这篇文章主要介绍了如何利用CSS3美化单选、复选按钮的显示样式,需要的朋友可以参考借鉴，下面来一起看看吧。
简单asp网站源码,vscode连接pg数据库,ubuntu 终端拷贝,Tomcat本地进不去,爬虫脑位置,php框架研究,三十九个seo经典案例,百度旅游网站 模板lzw
前言
3d麻将源码出售,vscode启动项目为什么很慢,ubuntu vnc空白,tomcat6ll下载,phyon爬虫入门,苏州软世通php,seo免费优化app 关键词lzw
相信大家都知道在表单元素中，单选按钮和复选按钮都具有选中和未选中状态。要覆写这两个按钮默认样式比较困难。在CSS3中，我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。利用CSS3我们可以打造非常具有个性化的用户表单，本文中实现的效果非常不错，感兴趣的朋友们下面来一起学习学习。
影视大全源码,ubuntu反应迟钝,tomcat 文件夹被删,vue google爬虫,销售PHP代码,seo关键词排名服务商lzw
效果图如下
实例代码
复选单选样式form {border: 1px solid #ccc;padding: 20px;width: 300px; } .wrapper {margin-bottom: 10px; } /*复选框*/ .checkbox-box {display: inline-block;width: 20px;height: 20px;margin-right: 10px;position: relative;border: 2px solid orange;vertical-align: middle; } .checkbox-box input {opacity: 0;position: absolute;top:0;left:0;z-index:10; } .checkbox-box span {position: absolute;top: -10px;right: 3px;font-size: 30px;font-weight: bold;font-family: Arial;-webkit-transform: rotate(30deg);transform: rotate(30deg);color: orange; }.checkbox-box input[type="checkbox"] + span {opacity:0; } .checkbox-box input[type="checkbox"]:checked + span {opacity: 1; } /*单选框*/ .redio-box {display: inline-block;width: 30px;height: 30px;margin-right: 10px;position: relative;background: orange;vertical-align: middle;border-radius: 100%; } .redio-box input {opacity: 0;position: absolute;top:0;left:0;width: 100%;height:100%;z-index:100;/*使input按钮在span的上一层，不加点击区域会出现不灵敏*/ } .redio-box span { display: block;width: 10px;height: 10px;border-radius: 100%;position: absolute;background: #fff;top: 50%;left:50%;margin: -5px 0 0 -5px;z-index:1; } .redio-box input[type="radio"] + span {opacity: 0; } .redio-box input[type="radio"]:checked + span {opacity: 1; }复选框：
√
√
√
√
单选框
注意：
+ 是css的相邻选择符。
关系选择符只有四种,是 空格 > + ~ （包含选择符、子选择符、相邻选择符、兄弟选择符）
更多利用CSS3美化单选、复选按钮的显示样式相关文章请关注PHP中文网！
