html两个性别按钮并排,css实现男女切换按钮

最近从后端跑到前端，写H5界面，看到ui给的图如下:

样式一：

上网搜如大海捞针，于是自己写了一下 ,代码如下:

.tgl { display: none; }

.tgl + .tgl-btn {

outline: 0;

display: block;

width:100px;

height:28px;

position: relative;

}

.tgl-skewed + .tgl-btn {

overflow: hidden;

font-family: sans-serif;

}

.tgl-skewed + .tgl-btn:after, .tgl-skewed + .tgl-btn:before {

display: inline-block;

width: 50%;

text-align: center;

position: absolute;

line-height: 30px;

font-weight: bold;

color: #fff;

font-size: 14px;

}

/*默认的*/

.tgl-skewed + .tgl-btn:after {

left: 0;

color: #40404C;

background-color: #FFE33E;

content: attr(data-tg-on);

}

.tgl-skewed + .tgl-btn:before {

color: #AFB9CA;

left: 50%;

background-color: #F7F9FC;

content: attr(data-tg-off);

}

/*选中后*/

.tgl-skewed:checked + .tgl-btn:after {

left: 50%;

background-color: #FFE33E;

content: attr(data-tg-off);

}

.tgl-skewed:checked + .tgl-btn:before {

left: 0;

background-color: #F7F9FC;

content: attr(data-tg-on);

}

样式二：

男

女

*{

box-sizing: border-box;

}

.radio{

display: inline-block;

position: relative;

line-height: 18px;

cursor: pointer;

}

.radio input{

display: none;

}

.radio .radio-bg{

display: inline-block;

height: 20px;

width: 20px;

background-color: #ffffff;

border: 1px solid #75777c;

border-radius: 100%;

vertical-align: top;

cursor: pointer;

transition: all 0.2s ease;

}

.radio .radio-on{

display: none;

}

.radio input:checked + span.radio-on{

width: 14px;

height: 14px;

position: absolute;

border-radius: 100%;

background-color: #505ff9;

top: 3px;

left: 3px;

transition: all 0.2s ease;

display: inline-block;

}

来源：oschina

链接：https://my.oschina.net/u/4275644/blog/4462552