css中单选按钮怎么写,css

css

*,

*:after,

*:before {

box-sizing: border-box;

}

.container {

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

width: 100%;

display: -webkit-box;

display: flex;

-webkit-box-pack: center;

justify-content: center;

-webkit-box-align: center;

align-items: center;

padding: 20px;

}

body {

font-family: "Inter", sans-serif;

color: #340417;

font-size: calc(1em + 1.25vw);

background-color: #f4e7ec;

}

form {

display: -webkit-box;

display: flex;

flex-wrap: wrap;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

flex-direction: column;

}

label {

display: -webkit-box;

display: flex;

cursor: pointer;

font-weight: 500;

}

label input {

display: none;

}

label input:checked + span {

background-color: #edd8e0;

}

label input:checked + span:before {

box-shadow: inset 0 0 0 0.4375em #900c3f;

}

label span {

display: -webkit-box;

display: flex;

-webkit-box-align: center;

align-items: center;

margin-bottom: 0.375em;

padding: 0.375em 0.75em 0.375em 0.375em;

border-radius: 99em;

-webkit-transition: 0.25s ease;

transition: 0.25s ease;

}

label span:hover {

background-color: #edd8e0;

}

label span:before {

display: -webkit-box;

display: flex;

flex-shrink: 0;

content: "";

background-color: #fff;

width: 1.5em;

height: 1.5em;

border-radius: 50%;

margin-right: 0.375em;

-webkit-transition: 0.25s ease;

transition: 0.25s ease;

box-shadow: inset 0 0 0 0.125em #900c3f;

}