read-only 가상 클래스

가상 클래스 read-only는 readonly 속성을 가진 입력 필드의 스타일을 지정합니다. 이러한 입력 필드는 읽기 전용으로, 즉, 데이터를 입력하거나 변경할 수 없지만, 데이터를 선택하고 복사하는 것은 가능합니다.

문법

css선택자:read-only {
  
}

예시

읽기 전용 입력 필드에 밝은 회색 테두리를 설정해 보겠습니다:

html<p>
  <label>텍스트 입력</label>
  <input type="text">
</p>
<p>
  <label>읽기 전용 텍스트</label>
  <input type="text" value="text" readonly>
</p>

cssinput:read-only {
  border: 1px solid #D8DFE8;
}

Результат:

참고 항목