read-only 가상 클래스
가상 클래스 read-only는
readonly 속성을 가진 입력 필드의 스타일을 지정합니다.
이러한 입력 필드는 읽기 전용으로,
즉, 데이터를 입력하거나 변경할 수 없지만,
데이터를 선택하고 복사하는 것은 가능합니다.
문법
선택자:read-only {
}
예시
읽기 전용 입력 필드에 밝은 회색 테두리를 설정해 보겠습니다:
<p>
<label>텍스트 입력</label>
<input type="text">
</p>
<p>
<label>읽기 전용 텍스트</label>
<input type="text" value="text" readonly>
</p>
input:read-only {
border: 1px solid #D8DFE8;
}
:
참고 항목
-
가상 클래스
:read-write,
변경 가능한 입력 필드의 스타일을 지정합니다. -
가상 클래스
:default,
기본값으로 선택된 요소의 스타일을 지정합니다. -
가상 클래스
:indeterminate,
불확정 상태에 있는 선택 요소(체크박스 등)의 스타일을 지정합니다. -
가상 클래스
:optional,
required 속성이 없는 입력 필드의 스타일을 지정합니다. -
가상 클래스
:placeholder-shown,
플레이스홀더 텍스트가 표시될 때 요소의 스타일을 지정합니다. -
가상 클래스
:required,
required 속성이 설정된 입력 필드의 스타일을 지정합니다. -
가상 클래스
:focus-within,
포커스를 받은 요소의 스타일을 지정합니다. -
속성
caret-color,
입력 필드의 텍스트 커서 색상을 지정합니다.
