:checked
Baseline
Widely available
This feature is well established and works across many devices and browser versions. Itâs been available across browsers since иÑÐ»Ñ 2015 г..
CSS пÑевдоклаÑÑÑ :checked CSS наÑ
Ð¾Ð´Ð¸Ñ Ð»ÑбÑе ÑлеменÑÑ radio (<input type="radio">), checkbox (<input type="checkbox">) или option (<option> внÑÑÑи <select>), коÑоÑÑе вÑбÑÐ°Ð½Ñ Ð¸Ð»Ð¸ вклÑÑенÑ. ÐолÑзоваÑÐµÐ»Ñ Ð¼Ð¾Ð¶ÐµÑ Ð¸Ð·Ð¼ÐµÐ½Ð¸ÑÑ ÑÑо ÑоÑÑоÑние, нажав на ÑлеменÑ, или вÑбÑав дÑÑгое знаÑение, в ÑÑом ÑлÑÑае :checked повÑоÑно не пÑимениÑÑÑ Ðº ÑлеменÑÑ, а ÑоÑ
ÑаниÑÑÑ.
СинÑакÑиÑ
input:checked {
margin-left: 25px;
border: 1px solid blue;
}
ФоÑмалÑнÑй ÑинÑакÑиÑ
element:checked { ÑÑили }
ÐÑимеÑÑ
ÐÑимеÑÑ ÑелекÑоÑов
/* лÑбой "кликабелÑнÑй" ÑÐ»ÐµÐ¼ÐµÐ½Ñ */
:checked {
width: 50px;
height: 50px;
}
/* ÑолÑко Ñадиокнопки */
input[type="radio"]:checked {
margin-left: 25px;
}
/* ÑолÑко ÑекбокÑÑ */
input[type="checkbox"]:checked {
display: none;
}
/* ÑолÑко ÑлеменÑÑ option */
option:checked {
color: red;
}
input[type="radio"]:checked-
ÐÐ°Ñ Ð¾Ð´Ð¸Ñ, вÑе оÑмеÑеннÑе на ÑÑÑаниÑе, Ñадиокнопки
input[type="checkbox"]:checked-
ÐÐ°Ñ Ð¾Ð´Ð¸Ñ Ð²Ñе оÑмеÑеннÑе ÑекбокÑÑ
option:checked-
ÐÐ°Ñ Ð¾Ð´Ð¸Ñ Ð²Ñе оÑмеÑеннÑе option
ÐÑполÑзование ÑкÑÑÑÑÑ ÑекбокÑов, ÑÑÐ¾Ð±Ñ Ñ ÑаниÑÑ Ð½ÐµÐºÐ¾ÑоÑÑе бÑлевÑкие знаÑÐµÐ½Ð¸Ñ Ð² CSS
ÐÑевдоклаÑÑ :checked пÑименÑеÑÑÑ Ðº ÑкÑÑÑÑм ÑекбокÑам в наÑале ваÑей ÑÑÑаниÑÑ, коÑоÑÑе могÑÑ Ð¸ÑполÑзоваÑÑÑÑ, ÑÑÐ¾Ð±Ñ Ñ
ÑаниÑÑ Ð½ÐµÐºÐ¾ÑоÑÑе динамиÑеÑкие знаÑениÑ, иÑполÑзÑемÑе в CSS-пÑавилаÑ
. СледÑÑÑий пÑÐ¸Ð¼ÐµÑ Ð¿Ð¾ÐºÐ°Ð·ÑваеÑ, как ÑкÑÑваÑÑ/показÑваÑÑ Ð½ÐµÐºÐ¾ÑоÑÑе ÑаÑÑиÑÑемÑе ÑлеменÑÑ, Ð½Ð°Ð¶Ð¸Ð¼Ð°Ñ Ð½Ð° кнопкÑ:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>РаÑÑиÑÑемÑе ÑлеменÑÑ</title>
<style>
#expand-btn {
margin: 0 3px;
display: inline-block;
font:
12px / 13px "Lucida Grande",
sans-serif;
text-shadow: rgba(255, 255, 255, 0.4) 0 1px;
padding: 3px 6px;
border: 1px solid rgba(0, 0, 0, 0.6);
background-color: #969696;
cursor: default;
border-radius: 3px;
box-shadow:
rgba(255, 255, 255, 0.4) 0 1px,
inset 0 20px 20px -10px white;
}
#isexpanded:checked ~ #expand-btn,
#isexpanded:checked ~ * #expand-btn {
background: #b5b5b5;
box-shadow:
inset rgba(0, 0, 0, 0.4) 0 -5px 12px,
inset rgba(0, 0, 0, 1) 0 1px 3px,
rgba(255, 255, 255, 0.4) 0 1px;
}
#isexpanded,
.expandable {
display: none;
}
#isexpanded:checked ~ * tr.expandable {
display: table-row;
background: #cccccc;
}
#isexpanded:checked ~ p.expandable,
#isexpanded:checked ~ * p.expandable {
display: block;
background: #cccccc;
}
</style>
</head>
<body>
<input type="checkbox" id="isexpanded" />
<h1>РаÑÑиÑÑемÑе ÑлеменÑÑ</h1>
<table>
<thead>
<tr>
<th>Ðолонка #1</th>
<th>Ðолонка #2</th>
<th>Ðолонка #3</th>
</tr>
</thead>
<tbody>
<tr class="expandable">
<td>[ÑекÑÑ ÑÑейки]</td>
<td>[ÑекÑÑ ÑÑейки]</td>
<td>[ÑекÑÑ ÑÑейки]</td>
</tr>
<tr>
<td>[ÑекÑÑ ÑÑейки]</td>
<td>[ÑекÑÑ ÑÑейки]</td>
<td>[ÑекÑÑ ÑÑейки]</td>
</tr>
<tr>
<td>[ÑекÑÑ ÑÑейки]</td>
<td>[ÑекÑÑ ÑÑейки]</td>
<td>[ÑекÑÑ ÑÑейки]</td>
</tr>
<tr class="expandable">
<td>[ÑекÑÑ ÑÑейки]</td>
<td>[ÑекÑÑ ÑÑейки]</td>
<td>[ÑекÑÑ ÑÑейки]</td>
</tr>
<tr class="expandable">
<td>[ÑекÑÑ ÑÑейки]</td>
<td>[ÑекÑÑ ÑÑейки]</td>
<td>[ÑекÑÑ ÑÑейки]</td>
</tr>
</tbody>
</table>
<p>[какой-Ñо ÑекÑÑ Ð¿ÑимеÑа]</p>
<p>
<label for="isexpanded" id="expand-btn">ÐоказаÑÑ ÑкÑÑÑÑе ÑлеменÑÑ</label>
</p>
<p class="expandable">[дÑÑгой ÑекÑÑ Ð´Ð»Ñ Ð¿ÑимеÑа]</p>
<p>[какой-Ñо ÑекÑÑ Ð¿ÑимеÑа]</p>
</body>
</html>
ÐÑполÑзование ÑкÑÑÑÑÑ Ñадиокнопок, ÑÑÐ¾Ð±Ñ Ñ ÑаниÑÑ Ð½ÐµÐºÐ¾ÑоÑÑе бÑлевÑкие знаÑÐµÐ½Ð¸Ñ Ð² CSS
Также Ð²Ñ Ð¼Ð¾Ð¶ÐµÑе пÑевдоклаÑÑ :checked, ÑÑÐ¾Ð±Ñ ÑкÑÑваÑÑ Ñадиокнопки Ð´Ð»Ñ Ñого, ÑÑÐ¾Ð±Ñ ÑоздаÑÑ, напÑимеÑ, галеÑÐµÑ Ð¸Ð·Ð¾Ð±Ñажений Ñ Ð¿Ð¾Ð»Ð½Ð¾ÑазмеÑнÑми каÑÑинками, показÑваемÑми пÑи наведении на ниÑ
мÑÑи.
СпеÑиÑикаÑии
| Specification |
|---|
| HTML # selector-checked |
| Selectors Level 4 # checked-pseudo |