:checked Archives - Lena Design

The CSS :checked selector selects all checked elements like radio buttons, checkboxes, and <option> element.

Example1:

Changing the width and height for every checked element (for radio buttons, checkboxes):

<!DOCTYPE html>
<html>
<head>
<style> 
input:checked {
  height: 45px;
  width: 45px;
}
</style>
</head>
<body>

<form action="">
  <input type="radio" checked="checked" value="black" name="colours">Black<br>
  <input type="radio" value="white" name="colours">White<br>
  <input type="checkbox" checked="checked" value="dog"> I have a dog.<br>
  <input type="checkbox" value="cat"> I have a cat. 
</form>

</body>
</html>

Output:

Black
White
I have a dog.
I have a cat.

Example2:

Changing the width and height for every checked element (for the <option> element):

<!DOCTYPE html>
<html>
<head>
<style> 
option:checked {
  height: 150px;
  width: 150px;
}
</style>
</head>
<body>

<select>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
  <option value="jQ">jQuery</option>
</select>

</body>
</html>

Output:

Enjoy coding!