css去除单选按钮的圆点,CSS3带圆点游动动画的自定义单选框

CSS

语言：

CSSSCSS

确定

.checkable-group {

background: white;

border: 2px solid black;

border-radius: 16px;

margin: 0 auto;

position: relative;

width: 80%;

}

label {

border-bottom: 1px solid black;

display: block;

padding: 8px 16px 8px 32px;

position: relative;

}

label:last-of-type {

border-bottom: 0;

}

label:before {

border-radius: 16px;

box-shadow: inset 0 0 0 1px black;

content: '';

height: 16px;

left: 8px;

position: absolute;

top: 50%;

-webkit-transform: translateY(-50%);

transform: translateY(-50%);

width: 16px;

}

input {

left: -999em;

position: absolute;

}

.indicator {

background: dodgerblue;

border-radius: 10px;

display: inline-block;

height: 10px;

left: 11.2px;

opacity: 0;

position: absolute;

top: 12px;

-webkit-transition: opacity 0.2s ease-in 0.2s, -webkit-transform 0.2s ease-in-out;

transition: opacity 0.2s ease-in 0.2s, -webkit-transform 0.2s ease-in-out;

transition: opacity 0.2s ease-in 0.2s, transform 0.2s ease-in-out;

transition: opacity 0.2s ease-in 0.2s, transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;

width: 10px;

}

input[type='radio']:checked ~ .indicator {

opacity: 1;

}

#radio-1:checked ~ .indicator {

-webkit-transform: translateY(0px);

transform: translateY(0px);

}

#radio-2:checked ~ .indicator {

-webkit-transform: translateY(35px);

transform: translateY(35px);

}

#radio-3:checked ~ .indicator {

-webkit-transform: translateY(70px);

transform: translateY(70px);

}

#radio-4:checked ~ .indicator {

-webkit-transform: translateY(105px);

transform: translateY(105px);

}

h2 {

text-align: center;

}

body {

background: -webkit-linear-gradient(150deg, gold, deeppink);

background: linear-gradient(-60deg, gold, deeppink);

min-height: 100vh;

padding: 2rem;

}

*,

*:before,

*:after {

box-sizing: border-box;

}

*,

*:focus,

*:active,

*:focus:active,

*:before,

*:before:focus,

*:before:active,

*:before:focus:active,

*:after,

*:after:focus,

*:after:active,

*:after:focus:active {

outline: none;

}