CSS :checked Pseudo Class
The :checked pseudo-class is used to select elements when they are in the selected state. It only relates to the <input> (only for radio buttons and checkboxes) and the <option> elements.
Checkbox and radio elements can be toggled "on" and "off" by the user.
Version ¶
HTML Living Standard
HTML5
Selectors Level 4
Syntax¶
:checked {
css declarations;
}In the following example, check the checkbox to see how it works.
Example of the :checked selector with the <div> tag:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin: 10px;
font-size: 20px;
}
input:checked + label {
color: #000;
}
input[type="radio"]:checked {
box-shadow: 0 0 0 4px #8ebf42;
}
/* Checkbox element, when checked */
input[type="checkbox"]:checked {
box-shadow: 0 0 0 3px #1c87c9;
}
</style>
</head>
<body>
<h2>:checked selector example</h2>
<div>
<input type="radio" name="my-input" id="yes">
<label for="yes">Yes</label>
<input type="radio" name="my-input" id="no">
<label for="no">No</label>
</div>
<div>
<input type="checkbox" name="my-checkbox" id="opt-in">
<label for="opt-in">Check!</label>
</div>
</body>
</html>Example of the :checked selector with the <table>, <tr>, <th>, <td> tags:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table,tr,th,td {
border: 1px solid #ccc;
text-align: center;
border-collapse: collapse;
padding: 8px;
}
#toggle {
display: none;
}
.expandable {
visibility: collapse;
background: #1c87c9;
}
#btn {
display: inline-block;
margin-top: 15px;
padding: 10px 20px;
background-color: #8ebf42;
color: #fff;
cursor: pointer;
border-radius: 3px;
}
#toggle:checked ~ * .expandable {
visibility: visible;
}
#toggle:checked ~ #btn {
background-color: #ccc;
}
</style>
</head>
<body>
<h2>::checked selector example</h2>
<input type="checkbox" id="toggle" />
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr class="expandable">
<td>[more text]</td>
<td>[more text]</td>
<td>[more text]</td>
</tr>
<tr>
<td>[text]</td>
<td>[text]</td>
<td>[text]</td>
</tr>
<tr class="expandable">
<td>[more text]</td>
<td>[more text]</td>
<td>[more text]</td>
</tr>
<tr>
<td>[text]</td>
<td>[text]</td>
<td>[text]</td>
</tr>
<tr class="expandable">
<td>[more text]</td>
<td>[more text]</td>
<td>[more text]</td>
</tr>
</tbody>
</table>
<label for="toggle" id="btn">Click here!</label>
</body>
</html>Example of the :checked selector:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input[type=checkbox] {
vertical-align:middle;
}
input[type=checkbox] + label {
color: #999999;
font-style: normal;
}
input[type=checkbox]:checked + label {
color: #8ebf42;
font-style: italic;
font-weight:bold;
}
</style>
</head>
<body>
<h2>:checked selector example</h2>
<form>
<input type="checkbox" id="css" name="css">
<label for="css">Here is CSS example.</label>
</form>
</body>
</html>So, the :checked pseudo-class can be used for making forms more accessible and building interactive widgets with hidden inputs and their visible labels.
0 Comments
CAN FEEDBACK
Emoji