My current set up involves using <label>
elements with an <input type=radio>
as a child. This enables the label to be clickable and trigger the selection of the corresponding radio input.
<div id="content">
<label class="option">
<input type="radio" name="letters" value="a" />
<a>A</a>
<p>Lorem Ipsum.</p>
</label>
<label class="option">
<input type="radio" name="letters" value="b" />
<a>B</a>
<p>Lorem Ipsum.</p>
</label>
<label class="option">
<input type="radio" name="letters" value="cS" />
<a>C</a>
<p>Lorem Ipsum.</p>
</label>
<label class="option">
<input type="radio" name="letters" value="d" />
<a>D</a>
<p>Lorem Ipsum.</p>
</label>
</div>
I am facing difficulties in customizing the appearance of the labels. My objective is to modify the background color when the input is selected. This question follows up on this post.