CSS의 :read-write 선택자는 사용자가 '읽기'와 '쓰기', 즉 열람과 편집이 모두 가능한 요소를 선택할 때 사용합니다. 주로 폼(form) 내부의 입력 필드를 대상으로 하며, readonly 속성이나 disabled 속성이 설정되어 편집할 수 없는 요소는 자동으로 제외됩니다.
:read-write 선택자의 동작 원리
:read-write 선택자는 다음 조건을 만족하는 요소에 스타일을 적용합니다.
<input>,<textarea>처럼 기본적으로 편집 가능한 폼 요소contenteditable속성이 지정된 임의의 HTML 요소
반면 readonly 또는 disabled 속성이 있는 요소는 편집이 불가능하므로 이 선택자의 대상에서 제외되며, 이런 요소를 스타일링하려면 :read-only 선택자를 사용해야 합니다.
예제
다음 코드를 실행하여 :read-write 선택자를 직접 구현해 볼 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
input:read-write {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<form>
Subject: <input type = "text" name = "subject" value = "Java"><br>
Student: <input type = "text" name = "student" readonly value = "Amit"><br>
</form>
</body>
</html>실행 결과 해설
위 예제에서 Subject 입력 필드는 별도의 속성 제한 없이 자유롭게 편집할 수 있으므로, :read-write 선택자에 정의된 파란색 배경과 흰색 글자 스타일이 적용됩니다.
반면 Student 입력 필드에는 readonly 속성이 설정되어 있어 값을 수정할 수 없습니다. 따라서 이 필드는 :read-write 선택자의 대상에서 제외되어 기본 스타일 그대로 표시됩니다.
브라우저 호환성 참고 사항
:read-write 선택자는 Chrome, Edge, Safari 등 대부분의 최신 브라우저에서 지원됩니다. 다만 Firefox에서는 안정적인 동작을 위해 벤더 접두사인 :-moz-read-write를 함께 작성하는 것이 좋습니다.
input:read-write,
input:-moz-read-write {
background-color: blue;
color: white;
}이처럼 :read-write 선택자를 활용하면 편집 가능한 필드와 읽기 전용 필드를 시각적으로 구분하여, 사용자에게 더 명확하고 직관적인 폼 UI를 제공할 수 있습니다.