原文地址
html,body{
width:100%;height:100%;
}
body{
display: flex;
justify-content: center;
align-items: center;
background-color: #2196f317;
border-radius: 8px;
}
.question{
background-color: #fff;
width: 100%;
max-width: 500px;
border-radius: 15px;
overflow: hidden;
--correct: #5ed235;
--wrong: #f83d56;
--wrong-bg: rgba(248 ,61, 86,0.8);
--correct-bg: rgb(94 ,210, 53,0.8);
.questionHeader{
background-color: #e4e4e4;
padding: 1rem;
transition: .3s ease-out;
}
.list{
display: flex;
flex-direction: column;
padding: 1rem;
gap: 1rem;
.answer{
&:hover label{
background-color:#f3f3f3;
}
input{
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border-width: 0;
white-space: nowrap;
&[data-correct="false"]:checked + label{
color: #fff;
font-weight: 700;
background-color: var(--wrong);
border-color: var(--wrong);
}
&[data-correct="true"]:checked + label{
color: #fff;
font-weight: 700;
background-color: var(--correct);
border-color: var(--correct);
}
}
label{
display: flex;
align-items: center;
gap: 0.5rem;
background-color: #fff;
border: 1px solid lightgrey;
padding: 0.5rem 0.75rem;
border-radius: 20px;
cursor: pointer;
transition: .3s ease-out;
&:before{
content: "";
--size: 1.5rem;
width: var(--size);
height: var(--size);
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 50%;
}
}
}
}
}
.question:has(input[data-correct="false"]:checked) {
.questionHeader {
box-shadow: inset 0 7px 0 0 var(--wrong);
background-color: var(--wrong-bg);
}
}
.question:has(input[data-correct="true"]:checked) {
.questionHeader {
box-shadow: inset 0 7px 0 0 var(--correct);
background-color: var(--correct-bg);
}
}
.question:has(input[data-correct="false"]:checked) {
input[data-correct="true"] + label {
animation: flash 2s infinite;
}
}
@keyframes flash {
0% {
background-color: white;
}
25% {
background-color: #5ed235;
}
50% {
background-color: white;
}
75% {
background-color: #5ed235;
}
100% {
background-color: white;
}
}