Get your own website Result Size: 625 x 565
x
 
<!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>
<h1>Demo of :has()</h1>
<p>Please select your favorite Web language:</p>
<form action="/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>