2025年3月17日 星期一 甲辰(龙)年 月十六 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > Html+Div+Css(前端)

纯css3美化checkbox、radio默认样式

时间:07-30来源:作者:点击数:28
一、效果展示
这里写图片描述
二、实现步骤
  • 1、隐藏默认的样式
  • -webkit-appearance: none;
  • appearance: none;
  • outline: none;
  • 2、css3的对号样式
  • content: "\2713";
  • 3、选中的css放到after选择器
  • input[type=checkbox]:checked::after
三、全部实现代码(直接复制到xxx.html就能看到效果)
  • <html>
  • <head>
  • <style>
  • label { /*flex布局让子元素水平垂直居中*/
  • display: flex;
  • align-items: center;
  • justify-content: center;
  • }
  • input[type=checkbox],input[type=radio] {
  • -webkit-appearance: none;
  • appearance: none;
  • outline: none;
  • width: 12px;
  • height: 12px;
  • cursor: pointer;
  • vertical-align: center;
  • background: #fff;
  • border: 1px solid #ccc;
  • position: relative;
  • }
  • input[type=checkbox]:checked::after {
  • content: "\2713";
  • display: block;
  • position: absolute;
  • top: -1px;
  • left: -1px;
  • right: 0;
  • bottom: 0;
  • width: 10px;
  • height: 10px;
  • line-height: 10px;
  • border: 1px solid #ddd;
  • color: red;
  • font-size: 12px;
  • }
  • input[type=radio]:checked::after {
  • content: "";
  • display: block;
  • position: absolute;
  • top: 2px;
  • left: 2px;
  • right: 0;
  • bottom: 0;
  • width: 6px;
  • height: 6px;
  • background-color: red;
  • }
  • input[type=radio], input[type=radio]:checked::after {
  • border-radius: 50%;
  • }
  • </style>
  • </head>
  • <body>
  • <label><input type="checkbox" />1111</label>
  • <label><input type="checkbox" />222</label>
  • <label><input type="radio" name="test"/>aaa</label>
  • <label><input type="radio" name="test"/>bbb</label>
  • </body>
  • </html>
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门