You are on the editable version of MDN Web Docs

MDN 웹 문서 사용자로 보기: https://developer.mozilla.org/ko/docs/Web/CSS/:disabled

CSS :disabled 의사 클래스는 모든 비활성 요소를 나타냅니다. 비활성 요소란 활성(선택, 클릭, 입력 등등)하거나 포커스를 받을 수 없는 요소를 말합니다. 반대 상태인 활성 요소도 존재합니다.

/* 모든 비활성 <input> 선택 */
input:disabled {
  background: #ccc;
}

구문

:disabled

예제

다음 예제는 사용자가 청구 주소 입력 칸을 켜거나 끌 수 있는 기능을 JavaScript change 이벤트를 통해 구현한 기본적인 배송 양식입니다.

HTML

<form action="#">
  <fieldset id="shipping">
    <legend>배송지</legend>
    <input type="text" placeholder="이름">
    <input type="text" placeholder="주소">
    <input type="text" placeholder="우편번호">
  </fieldset>
  <br>
  <fieldset id="billing">
    <legend>청구지</legend>
    <label for="billing-checkbox">배송지와 동일:</label>
    <input type="checkbox" id="billing-checkbox" checked>
    <br>
    <input type="text" placeholder="이름" disabled>
    <input type="text" placeholder="주소" disabled>
    <input type="text" placeholder="우편번호" disabled>
  </fieldset>
</form>

CSS

input[type="text"]:disabled {
  background: #ccc;
}

JavaScript

// 페이지 로딩이 끝날 때까지 기다림
document.addEventListener('DOMContentLoaded', function () {
  // `change` 이벤츠 수신기를 체크박스에 부착
  document.getElementById('billing-checkbox').onchange = toggleBilling;
}, false);

function toggleBilling() {
  // 청구지 텍스트 입력 칸을 모두 선택
  var billingItems = document.querySelectorAll('#billing input[type="text"]');

  // 하나씩 토글
  for (var i = 0; i < billingItems.length; i++) {
    billingItems[i].disabled = !billingItems[i].disabled;
  }
}

결과

명세

Specification Status Comment
HTML Living Standard
The definition of ':disabled' in that specification.
Living Standard No change.
HTML5
The definition of ':disabled' in that specification.
Recommendation Defines the semantics of HTML and forms.
Selectors Level 4
The definition of ':disabled' in that specification.
Working Draft No change.
Selectors Level 3
The definition of ':disabled' in that specification.
Recommendation Defines the pseudo-class, but not the associated semantics.

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
:disabledChrome Full support 1Edge Full support 12
Notes
Full support 12
Notes
Notes Edge does not recognize :disabled on the <fieldset> element.
Firefox Full support 1IE Full support 9
Notes
Full support 9
Notes
Notes Internet Explorer does not recognize :disabled on the <fieldset> element.
Opera Full support 9Safari Full support 3.1WebView Android Full support 2Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 3.1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
See implementation notes.
See implementation notes.

같이 보기

문서 태그 및 공헌자

이 페이지의 공헌자: alattalatta
최종 변경자: alattalatta,