Having a bit of an issue while trying to style some cards in a form. The goal is to highlight the label tag that contains the image with green when its selected.
Heres what I want to achieve:
Heres what it should look like when its selected:
I tried doing:Code
.form-trucks input[type=radio]:checked + label
But that doesn't make much sense since the label tag is outside on the input[type=radio]:checked tag
Is there a better approach to this? Or can someone link to some examples of forms that use cards with either a highlight selector, or even a radio selector
Code
<form action="">
<p>First Name</p>
<input type="text" name="firstname"><br>
<p>Email Address</p>
<input type="text" name="firstname"><br>
<p>Contact Number</p>
<input type="text" name="firstname"><br>
<p>Leave your message</p>
<input type="text" name="firstname"><br>
<div class="form-trucks">
<label>
<input type="radio" name="test" value="small" checked>
<img src="assets/fleet-truck.png">
<div class="radial-select"></div>
</label>
<label>
<input type="radio" name="test" value="small">
<img src="assets/fleet-truck-2.png">
</label>
<label>
<input type="radio" name="test" value="small">
<img src="assets/fleet-truck-3.png">
</label>
<label>
<input type="radio" name="test" value="small">
<img src="assets/fleet-truck-4.png">
</label>
</div>
</form>
Code
.form-trucks {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 15px;
padding: 15px 0px;
}
.form-trucks input[type=radio] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.form-trucks label {
height: 120px;
padding: 15px;
position: relative;
background: white;
border-radius: 6px;
border: 1px solid #d2d1d1;
}