CSS 참조 설명서

CSS @규칙(RULES)

CSS 속성大全

CSS 함수(Function)CSS 선택자 전체 가이드서

CSS :read-only 선택자

:read-only CSS 패턴은 사용자가 편집할 수 없는 상태의 요소를 나타냅니다(예: 잠금된 텍스트 입력 필드).

완전한 CSS 선택자 참조 매뉴얼

온라인 예제

input 요소에 "readonly" 속성을 설정한 입력을 배경색으로 파란 녹색으로 설정합니다:

예제

<!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">　
<title>기본 강의(oldtoolbag.com)</title>/title>　
<style>
input　{　min-width:　25em;　}
input:-moz-read-only　{　background:　cyan;　}
input:read-only　{　background:　cyan;　}
p:-moz-read-only　{　background:　lightgray;　}
p:read-only　{　background:　lightgray;　}
p[contenteditable="true"]　{　color:　blue;　}
</style>
</head>
<body>
<input　type="text"　value="원하는 어떤 것을 입력하세요.">
<input　type="text"　value="읽기 전용."　readonly>
<p>일반 문단.</p>/p>
<p　contenteditable="true">수정 가능한 문단!</p>/p>
</body>
</html>

테스트를 보세요 ‹/›

정의 및 사용

:read-only 선택자는 "readonly" 속성을 설정한 요소를 선택합니다.

폼 요소는 "readonly" 속성을 설정하여 요소가 읽기 전용으로 정의할 수 있습니다.

주의: 현재 대부분의 브라우저, 　:read-only 선택자는 input과 textarea 요소에 적용되지만, "readonly" 속성을 설정한 요소에도 적용됩니다.

브라우저 호환성

표에서의 숫자는 해당 속성을 지원하는 첫 번째 브라우저 버전 번호를 나타냅니다.

선택자
:read-only	지원	지원하지 않음	-moz-	네	네

CSS 문법

/*　Firefox에서 지원하기 위해 모든 읽기 전용 input 요소를 선택하려면, 추가해야 합니다.-moz 접두사　*/
input:-moz-read-only　{
　　background-color:　#ccc;
}
input:read-only　{
　　background-color:　#ccc;
}

주의: 이 선택자는 readonly 속성을 가진 <input> 요소만 선택하는 것이 아니라, 사용자가 편집할 수 없는 모든 요소를 선택합니다.