<!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;
}
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>