.env.example

ALGOLIA_APP_ID=
ALGOLIA_ADMIN_KEY=
ALGOLIA_SEARCH_KEY=
---
title: \":checked\"
slug: Web/CSS/:checked
page-type: css-pseudo-class
browser-compat: css.selectors.checked
---

{{CSSRef}}

Селектор-[псевдоклас](/uk/docs/Web/CSS/Pseudo-classes) [CSS](/uk/docs/Web/CSS) **`:checked`** (позначений) представляє будь-який елемент **radio** ([`\u003cinput type=\"radio\"\u003e`](/uk/docs/Web/HTML/Element/input/radio)), **checkbox** ([`\u003cinput type=\"checkbox\"\u003e`](/uk/docs/Web/HTML/Element/input/checkbox)) або **option** ({{HTMLElement(\"option\")}} у {{HTMLElement(\"select\")}}), що має позначку або переключений у стан `on`.

{{EmbedInteractiveExample(\"pages/tabbed/pseudo-class-checked.html\", \"tabbed-shorter\")}}

Користувачі можуть задати цей стан, вибравши елемент, або зняти його, скасувавши вибір елемента.

\u003e **Примітка:** У зв'язку з тим, що браузери нерідко обробляють елементи `\u003coption\u003e` як [заміщені елементи](/uk/docs/Web/CSS/Replaced_element), то ступінь, до якого їх можна стилізувати за допомогою псевдокласу `:checked`, у різних браузерах різний.

## Синтаксис

```css
:checked {
  /* ... */
}
```

## Приклади

### Базовий приклад

#### HTML

```html
\u003cdiv\u003e
  \u003cinput type=\"radio\" name=\"my-input\" id=\"yes\" value=\"yes\" /\u003e
  \u003clabel for=\"yes\"\u003eТак\u003c/label\u003e

  \u003cinput type=\"radio\" name=\"my-input\" id=\"no\" value=\"no\" /\u003e
  \u003clabel for=\"no\"\u003eНі\u003c/label\u003e
\u003c/div\u003e

\u003cdiv\u003e
  \u003cinput type=\"checkbox\" name=\"my-checkbox\" id=\"opt-in\" /\u003e
  \u003clabel for=\"opt-in\"\u003eВибери мене!\u003c/label\u003e
\u003c/div\u003e

\u003cselect name=\"my-select\" id=\"fruit\"\u003e
  \u003coption value=\"opt1\"\u003eЯблука\u003c/option\u003e
  \u003coption value=\"opt2\"\u003eВиноград\u003c/option\u003e
  \u003coption value=\"opt3\"\u003eГруші\u003c/option\u003e
\u003c/select\u003e
```

#### CSS

```css
div,
select {
  margin: 8px;
}

/* Підписи для позначених полів */
input:checked + label {
  color: red;
}

/* Радіоелемент, коли вибраний *.
input[type=\"radio\"]:checked {
  box-shadow: 0 0 0 3px orange;
}

/* Елемент поля для галочки, коли має галочку */
input[type=\"checkbox\"]:checked {
  box-shadow: 0 0 0 3px hotpink;
}

/* Елементи варіантів, коли обрані */
option:checked {
  box-shadow: 0 0 0 3px lime;
  color: red;
}
```

#### Результат

{{EmbedLiveSample(\"bazovyi-pryklad\")}}

### Перемикання елементів за допомогою прихованого поля для галочки

Цей приклад використовує псевдоклас `:checked`, щоб дати користувачам змогу перемикати вміст на основі стану поля для галочки, не використовуючи [JavaScript](/uk/docs/Web/JavaScript).

#### HTML

```html
\u003cinput type=\"checkbox\" id=\"expand-toggle\" /\u003e

\u003ctable\u003e
  \u003cthead\u003e
    \u003ctr\u003e
      \u003cth\u003eКолонка №1\u003c/th\u003e
      \u003cth\u003eКолонка №2\u003c/th\u003e
      \u003cth\u003eКолонка №3\u003c/th\u003e
    \u003c/tr\u003e
  \u003c/thead\u003e
  \u003ctbody\u003e
    \u003ctr class=\"expandable\"\u003e
      \u003ctd\u003e[іще тексту]\u003c/td\u003e
      \u003ctd\u003e[іще тексту]\u003c/td\u003e
      \u003ctd\u003e[іще тексту]\u003c/td\u003e
    \u003c/tr\u003e
    \u003ctr\u003e
      \u003ctd\u003e[текст комірки]\u003c/td\u003e
      \u003ctd\u003e[текст комірки]\u003c/td\u003e
      \u003ctd\u003e[текст комірки]\u003c/td\u003e
    \u003c/tr\u003e
    \u003ctr\u003e
      \u003ctd\u003e[текст комірки]\u003c/td\u003e
      \u003ctd\u003e[текст комірки]\u003c/td\u003e
      \u003ctd\u003e[текст комірки]\u003c/td\u003e
    \u003c/tr\u003e
    \u003ctr class=\"expandable\"\u003e
      \u003ctd\u003e[іще тексту]\u003c/td\u003e
      \u003ctd\u003e[іще тексту]\u003c/td\u003e
      \u003ctd\u003e[іще тексту]\u003c/td\u003e
    \u003c/tr\u003e
    \u003ctr class=\"expandable\"\u003e
      \u003ctd\u003e[іще тексту]\u003c/td\u003e
      \u003ctd\u003e[іще тексту]\u003c/td\u003e
      \u003ctd\u003e[іще тексту]\u003c/td\u003e
    \u003c/tr\u003e
  \u003c/tbody\u003e
\u003c/table\u003e

\u003clabel for=\"expand-toggle\" id=\"expand-btn\"\u003eПеремкнути приховані ряди\u003c/label\u003e
```

#### CSS

```css
/* Приховати поле для галочки для перемикання */
#expand-toggle {
  display: none;
}

/* Усталено приховати додатковий вміст */
.expandable {
  visibility: collapse;
  background: #ddd;
}

/* Оформити кнопку */
#expand-btn {
  display: inline-block;
  margin-top: 12px;
  padding: 5px 11px;
  background-color: #ff7;
  border: 1px solid;
  border-radius: 3px;
}

/* Показати прихований вміст, коли поле для галочки має галочку */
#expand-toggle:checked ~ * .expandable {
  visibility: visible;
}

/* Оформити кнопку, коли поле для галочки має галочку */
#expand-toggle:checked ~ #expand-btn {
  background-color: #ccc;
}
```

#### Результат

{{EmbedLiveSample(\"peremykannia-elementiv-za-dopomohoiu-prykhovanoho-polia-dlia-halochky\", \"auto\", 220)}}

## Специфікації

{{Specifications}}

## Сумісність із браузерами

{{Compat}}

## Дивіться також

- [Вебформи – робота з користувацькими даними](/uk/docs/Learn/Forms)
- [Оформлення вебформ](/uk/docs/Learn/HTML/Forms/Styling_HTML_forms)
- Пов'язані елементи HTML: [`\u003cinput type=\"checkbox\"\u003e`](/uk/docs/Web/HTML/Element/input/checkbox), [`\u003cinput type=\"radio\"\u003e`](/uk/docs/Web/HTML/Element/input/radio), {{HTMLElement(\"select\")}} і {{HTMLElement(\"option\")}}
- [Заміщені елементи](/uk/docs/Web/CSS/Replaced_element)