zig Tryit Editor

<!DOCTYPE html>
<html>
<head>
<style> 
label {
  display: block;
  margin-top: 1em;
}

input[type="radio"]:checked {
  box-shadow: 0 0 5px 3px blue;
}

input[type="checkbox"]:checked {
  box-shadow: 0 0 5px 3px maroon;
}

option:checked {
  color: blue;
  background-color: pink;  
}
</style>
</head>
<body>

<h1>Demo of :checked</h1>

<form>
<p>Select gender:</p>
<label><input name="gender" type="radio" value="male" checked> Male</label>
<label><input name="gender" type="radio" value="female"> Female</label>
<label><input name="gender" type="radio" value="other"> Other</label>

<p>Select transport:</p>
<label><input name="bike" type="checkbox" checked>I have a bike</label>
<label><input name="car" type="checkbox">I have a car</label>

<p>Select favorite color:</p>
<select name="color" id="color">
  <option value="opt1">Red</option>
  <option value="opt2">Green</option>
  <option value="opt3">Blue</option>
</select>

</form>

</body>

</html>