I am currently attempting to create a border or glowing effect around an image when the corresponding radio button is selected in my Angular program. Despite trying to modify certain properties of the image, I am facing difficulty as no changes are being applied to the image upon selecting the associated radio button.
This is the HTML code I have:
<div>
<title>Quiz Page</title>
<div class="quiz-container has-text-white">
<h2>Quiz Program</h2>
<span> {{timeLeft}} </span>
<div class="card has-text-black">
<form *ngIf="answer_form" [formGroup]="answer_form" (ngSubmit)="checkAnswers()" id="answer_form">
<div *ngFor="let question of questions;index as idx">
<h3>Question {{idx+1}}:</h3>
<p>{{question.Question}}</p>
<div class="field">
<div class="control" *ngFor="let answer of answers">
<div class="fl" *ngIf="answer.QuestionID === question._id">
<label class="radio">
<input type="radio" class="imgradio" value="{{answer._id}}" formControlName="{{question._id}}">
<img class="max-size-image" src={{answer.Answer}} alt="">
</label>
</div>
</div>
</div>
</div>
<button class="button is-primary is-rounded" *ngIf="!boolTimesUp">Submit</button>
</form>
<p id="time-left">{{timeLeftDisplay}}</p>
<p id="score">{{scoreDisplay}}</p>
</div>
</div>
Additionally, here is my CSS styling:
.quiz-container {
background: rgb(4, 82, 137);
background: linear-gradient(180deg, rgba(4, 82, 137, 1) 0%, rgba(22, 0, 84, 1) 50%, rgba(82, 1, 63, 1) 100%);
margin: 0 auto;
text-align: center;
min-height: 100vh;
max-height: fit-content;
}
h2 {
font-size: 24px;
margin-bottom: 10px;
}
p {
font-size: 16px;
margin-bottom: 10px;
}
#countdown {
font-size: 24px;
text-align: center;
}
#submit-btn {
margin-top: 20px;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.result {
margin-top: 15px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.card {
margin-left: 20%;
margin-right: 20%;
margin-top: 15px;
margin-bottom: 5px;
background-color: rgba(255, 255, 255, .15);
backdrop-filter: blur(5px);
}
.quest {
font-size: x-large;
font-weight: bold;
}
input[type=radio]:checked ~ img {
border: 2px solid red;
}
Despite applying this styling, the images do not change when selecting any of the radio buttons.