CSS 참조 설명서

CSS @규칙(RULES)

CSS 속성 전체

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

CSS :read-선택자 작성

:read-CSS 패seudo 클래스는 사용자가 편집할 수 있는 요소(예: 입력 가능한 텍스트의 input 요소)를 나타냅니다.

전체 CSS 선택자 참조 가이드

온라인 예제

input 요소가 읽을 수 없는 경우, 즉 "readonly" 속성이 없으면, 입력 필드 스타일을 orange 색으로 설정합니다:

예제

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>기본 강의(oldtoolbag.com)</title>/title>　
<style>
input:read-write
{
　　　　background-color: orange;
}
input:-moz-read-write {
　　background-color: #bbf;
}
</style>
</head>
<body>
<h3> :read-write 선택자 예제 시연.</h3>
<p>보통의 input 요소:<br><input value="hello"></p>
<p>readonly 만 읽을 수 있는 input 요소:<br><input readonly value="hello"></p>
<p> :read-write 선택자는 "readonly" 속성이 설정되지 않은 요소를 선택합니다.</p>
</body>
</html>

시험해 보세요 ‹/›

정의 및 사용

:read-write 선택자는 읽을 수 있는 및 쓸 수 있는 요소와 일치합니다.

주의: 현재, 대부분의 브라우저에서 :read-write 선택자는 input과 textarea 요소가 설정된 경우에만 사용됩니다.

브라우저 호환성

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

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

CSS 문법

/*　모든 편집 가능한 <input> 요소 선택　*/
/*　Firefox에서는 프리كس가 필요합니다　*/
input:-moz-read-write {
　　background-color: #bbf;
}
/*　Blink에서 지원됨/WebKit/Edge prefix 없이　*/
input:read-write {
　　background-color: #bbf;
}

주의: 이 선택자는 <input> 요소만 선택하는 것이 아니라, 사용자가 편집할 수 있는 모든 요소도 선택합니다. 예를 들어, contenteditable 속성이 설정된 <p> 요소와 같습니다.