From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/css/_colon_checked/index.html | 232 +++++++++++++++++++++++++++++ 1 file changed, 232 insertions(+) create mode 100644 files/ru/web/css/_colon_checked/index.html (limited to 'files/ru/web/css/_colon_checked') diff --git a/files/ru/web/css/_colon_checked/index.html b/files/ru/web/css/_colon_checked/index.html new file mode 100644 index 0000000000..66316fe2d2 --- /dev/null +++ b/files/ru/web/css/_colon_checked/index.html @@ -0,0 +1,232 @@ +--- +title: ':checked' +slug: 'Web/CSS/:checked' +tags: + - CSS + - Макет + - Псевдоклассы + - Руководство +translation_of: 'Web/CSS/:checked' +--- +
{{CSSRef}}
+ +

CSS псевдоклассы :checked CSS находит любые элементы radio (<input type="radio">), checkbox (<input type="checkbox">) или option ({{ HTMLElement("option") }} внутри {{ HTMLElement("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>
+
+ +

{{ EmbedLiveSample('Использование_скрытых_чекбоксов_чтобы_хранить_некоторые_булевские_значения_в_CSS', '', '', '', 'Web/CSS/:checked') }}

+ +

Использование скрытых радиокнопок, чтобы хранить некоторые булевские значения в CSS

+ +

Также вы можете псевдокласс :checked, чтобы скрывать радиокнопки для того, чтобы создать, например, галерею изображений с полноразмерными картинками, показываемыми при наведении на них мыши. Загрузите это демо как вариант решения.

+ +
Замечание: Для аналагично эффекта, но основанного на псевдоклассе :hover и без скрытых радиокнопок, смотрите это демо, взятое со страницы :hover.
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('HTML WHATWG', '#selector-checked', ':checked') }}{{ Spec2('HTML WHATWG') }}Без изменений.
{{ SpecName('HTML5 W3C', '#selector-checked', ':checked') }}{{ Spec2('HTML5 W3C') }}Определяет семантику в HTML.
{{ SpecName('CSS4 Selectors', '#checked', ':checked') }}{{ Spec2('CSS4 Selectors') }}Без изменений.
{{ SpecName('CSS3 Basic UI', '#pseudo-checked', ':checked') }}{{ Spec2('CSS3 Basic UI') }}Ссылается к Селекторам Уровня 3.
{{ SpecName('CSS3 Selectors', '#checked', ':checked') }}{{ Spec2('CSS3 Selectors') }}Определяет псевдокласс, но не семантику.
+ +

Поддержка браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка1.0{{ CompatGeckoDesktop(1.0) }}9.09.03.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка2.1{{ CompatGeckoMobile(1.0) }}9.09.53.1
+
+ +

 

-- cgit v1.2.3-54-g00ecf