Run ❯
Get your
own
website
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!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>
