:checked

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

:checked CSS 의사 클래스 선택자는 선택했거나 on 상태인 라디오(), 체크박스(), 옵션( 요소를 나타냅니다.

css
/* Matches any checked/selected radio, checkbox, or option */
:checked {
  margin-left: 25px;
  border: 1px solid blue;
}

사용자가 요소를 체크했거나 선택한 경우 활성화되고, 체크나 선택을 해제하는 경우 비활성화됩니다.

참고 : 많은 경우 브라우저는 요소를 대체 요소로 취급하므로, :checked 의사 클래스를 사용한 스타일을 적용할 수 있는 범위도 브라우저마다 다릅니다.

구문

Error: could not find syntax for this item

예제

기본 예제

HTML

html

CSS

css
div,
select {
  margin: 8px;
}

/* Labels for checked inputs */
input:checked + label {
  color: red;
}

/* Radio element, when checked */
input[type="radio"]:checked {
  box-shadow: 0 0 0 3px orange;
}

/* Checkbox element, when checked */
input[type="checkbox"]:checked {
  box-shadow: 0 0 0 3px hotpink;
}

/* Option elements, when selected */
option:checked {
  box-shadow: 0 0 0 3px lime;
  color: red;
}

결과

숨겨진 체크박스를 사용해 요소 켜고 끄기

다음 예제 코드는 :checked 의사 클래스와 체크박스를 사용해, JavaScript 없이도 사용자가 켜거나 끌 수 있는 콘텐츠를 구현합니다.

HTML

html




  
    

      Column #1
      Column #2
      Column #3
    

  
  
    
    

      [cell text]
      [cell text]
      [cell text]
    

    

      [cell text]
      [cell text]
      [cell text]

CSS

css
/* Hide the toggle checkbox */
#expand-toggle {
  display: none;
}

/* Hide expandable content by default */
.expandable {
  visibility: collapse;
  background: #ddd;
}

/* Style the button */
#expand-btn {
  display: inline-block;
  margin-top: 12px;
  padding: 5px 11px;
  background-color: #ff7;
  border: 1px solid;
  border-radius: 3px;
}

/* Show hidden content when the checkbox is checked */
#expand-toggle:checked ~ * .expandable {
  visibility: visible;
}

/* Style the button when the checkbox is checked */
#expand-toggle:checked ~ #expand-btn {
  background-color: #ccc;
}

결과

명세

Specification
HTML
# selector-checked
Selectors Level 4
# checked-pseudo

브라우저 호환성