CSS:
li {
list-style-type: none;
padding: 10px;
margin: 0 0 10px 0;
border: 2px solid #777;
border-radius: 5px;
}
input, label {
cursor: pointer;
}
li input:checked {
accent-color: red;
}
li:has(input:checked) {
border-color: red;
}
HTML:
<ul>
<li>
<input type="radio" id="option1" name="options" checked>
<label for="option1">Option 1</label>
</li>
<li>
<input type="radio" id="option2" name="options">
<label for="option2">Option 2</label>
</li>
<li>
<input type="radio" id="option3" name="options">
<label for="option3">Option 3</label>
</li>
</ul>
<ul>
<li>
<input type="checkbox" id="checkbox1" checked>
<label for="checkbox1">Checkbox 1</label>
</li>
<li>
<input type="checkbox" id="checkbox2">
<label for="checkbox2">Checkbox 2</label>
</li>
</ul>