Chinaunix首页 | 论坛 | 博客

拾忆1765207585的ChinaUnix博客

首页　| 　博文目录　| 　关于我

拾忆1765207585

  • 博客访问： 928171
  • 博文数量： 210
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 2070
  • 用 户 组： 普通用户
  • 注册时间： 2014-11-19 21:54
文章分类

全部博文（210）

文章存档

2020年（2）

2019年（18）

2018年（27）

2017年（5）

2016年（53）

2015年（88）

2014年（17）

我的朋友
最近访客
推荐博文
相关博文
自定义单选框 radio 的样式

分类： Web开发

2018-01-12 16:55:51


点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         
  7.         <style type="text/css">
  8.             
  9.      .rdo {
  10.          width: 20px;
  11.          height: 0px;
  12.          background-color: #000;
  13.          margin-right: 30px;
  14.          border-radius: 50%;
  15.          position: relative;
  16.      }
  17.     
  18.      .rdo:before,
  19.      .rdo:after {
  20.          content: '';
  21.          display: block;
  22.          position: absolute;
  23.          border-radius: 50%;
  24.          
  25.      }
  26.     
  27.      .rdo:before {
  28.          top: -15px;
  29.          left: 25px;
  30.          width: 18px;
  31.          height: 18px;
  32.          background-color: #fff;
  33.          border: 1px solid #000;
  34.          
  35.      }
  36.     
  37.      .rdo:after {
  38.          top: 6px;
  39.          left: 6px;
  40.          width: 8px;
  41.          height: 8px;
  42.          background-color: #fff;
  43.      }
  44.     
  45.      .rdo:checked:after {
  46.          top: -11px;
  47.          left: 29px;
  48.          width: 12px;
  49.          height: 12px;
  50.          background-color: red;
  51.          
  52.      }
  53.     
  54.      .rdo:checked:before {
  55.          border-color: red;
  56.      }
  57.     
  58.      </style>
  59.     </head>
  60.     <body>
  61. <ul>
  62. <input type="radio" class="rdo" name="sex" checked>男
  63. <input type="radio" class="rdo" name="sex">女
  64.     </body>
  65. </html>

阅读(1169) | 评论(0) | 转发(0) |
0

上一篇：微信小程序tab选项卡

下一篇：微信小程序点击添加 动画animation

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6