Chinaunix首页 | 论坛 | 博客
  • 博客访问: 565566
  • 博文数量: 208
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 2052
  • 用 户 组: 普通用户
  • 注册时间: 2014-11-19 21:54
文章分类

全部博文(208)

文章存档

2019年(18)

2018年(27)

2017年(5)

2016年(53)

2015年(88)

2014年(17)

分类: 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>

阅读(565) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~
评论热议
请登录后评论。

登录 注册