zig Tryit Editor

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

ul li {
  border: 1px solid gray;
  border-radius: 10px;
  padding: 10px;
  margin: 10px;
}

ul li input:checked {
  accent-color: maroon;
}

/* Select li elements that have checked input element inside */
ul li:has(input:checked) {
  border: 2px solid maroon;
}
</style>
</head>
<body>

<p>Please select your favorite Web language:</p>

<form action="https://www.w3schools.com/action_page.php">
<ul>
  <li><input type="radio" id="html" name="fav_language" value="HTML"><label for="html">HTML</label></li>
  <li><input type="radio" id="css" name="fav_language" value="CSS"><label for="css">CSS</label></li>
  <li><input type="radio" id="javascript" name="fav_language" value="JavaScript"><label for="javascript">JavaScript</label></li>
</ul>
<input type="submit" value="Submit">
</form>

</body>

</html>