61,110
社区成员
发帖
与我相关
我的任务
分享
input[type='radio'],input[type='checkbox']{
margin: 0;
position: relative;
outline: none;
width: 100px;
height: 100px;
font-size: 100px;
}
input[type='radio']:before{
content: ' ';
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100%;
height: 100%;
background: #fff;
border-radius: 50%;
border: 1px solid #01b9fe;
}
input[type='radio']:checked:after{
content: ' ';
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
width: 66%;
height: 66%;
background: #01b9fe;
border-radius: 50%;
}
input[type='checkbox']:before{
content: ' ';
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100%;
height: 100%;
background: #fff;
border: 1px solid #01b9fe;
}
input[type='checkbox']:checked:after{
content: '✔';
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
width: 66%;
height: 66%;
text-align: center;
line-height: 66%;
color: #01b9fe;
}
input[type='radio']{
margin: 0;
position: relative;
outline: none;
}
input[type='radio']:before{
content: ' ';
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100%;
height: 100%;
background: #fff;
border-radius: 50%;
border: 1px solid #01b9fe;
}
input[type='radio']:checked:after{
content: ' ';
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
width: 66%;
height: 66%;
background: #01b9fe;
border-radius: 50%;
}
.ant-radio-inner::after {
position: absolute;
top: 3px;
left: 3px;
display: table;
width: 8px;
height: 8px;
background-color: #1890ff;
border-top: 0;
border-left: 0;
border-radius: 8px;
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
-webkit-transition: all .3s cubic-bezier(.78,.14,.15,.86);
transition: all .3s cubic-bezier(.78,.14,.15,.86);
content: ' ';
}
.ant-radio-checked .ant-radio-inner::after {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
-webkit-transition: all .3s cubic-bezier(.78,.14,.15,.86);
transition: all .3s cubic-bezier(.78,.14,.15,.86);
}