css 单选框 样式 填充自定义背景 after

Posted on 2017-09-08 11:27  金-Fish  阅读(262)  评论(0)  编辑  收藏  举报

 

 1 input[type='radio']
 2                 //width 16px
 3                 //height 16px
 4                 display none
 5             //input[type='radio']:chcked
 6             //    backgound #006a45
 7             input:disabled
 8                 background #f5f5f5
 9             input:checked + i
10                 background-color #f6f8f9
11                 color #bbb;
12                 border 1px solid #e1e1e1
13             input + i
14                 box-shadow 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05)
15                 padding 8px
16                 border-radius 50px
17                 display inline-block
18                 position relative
19             input:checked + i::after
20                 content ' '
21                 width 8px
22                 height 8px
23                 border-radius 50%
24                 position absolute
25                 top: 4px
26                 background #019c66
27                 box-shadow inset 0px 0px 10px rgba(0,0,0,0.3)
28                 text-shadow 0px
29                 left 4px
30                 font-size 32px