CSS의 :read-write 선택자를 사용하면 readonly 속성이 없는, 즉 사용자가 자유롭게 값을 입력하거나 수정할 수 있는 요소만 골라서 스타일을 적용할 수 있습니다.
:read-write 선택자란?
:read-write 선택자는 편집 가능한 상태의 폼 요소(input, textarea 등)를 대상으로 합니다. 반대로 readonly 속성이 설정된 읽기 전용 요소나 disabled 속성이 있는 요소에는 적용되지 않으므로, 입력 가능한 필드와 그렇지 않은 필드를 시각적으로 구분할 때 매우 유용합니다.
예제 코드
아래 예제에서는 :read-write 선택자를 활용해 편집 가능한 input 요소에 파란색 배경과 흰색 글자를 적용합니다. 두 번째 input 요소는 readonly 속성이 있기 때문에 이 스타일이 적용되지 않습니다.
<!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 필드:
readonly속성이 없으므로:read-write선택자가 적용되어 파란색 배경에 흰색 텍스트로 표시됩니다. - Student 필드:
readonly속성이 있어 편집이 불가능하며, 해당 스타일이 적용되지 않고 기본 모양으로 유지됩니다.
참고 사항
:read-write 선택자와 짝을 이루는 :read-only 선택자도 함께 활용하면, 읽기 전용 요소에 별도의 스타일(예: 회색 배경)을 지정해 사용자 경험을 더욱 명확하게 개선할 수 있습니다. 또한 이 선택자들은 Chrome, Firefox, Safari, Edge 등 주요 최신 브라우저에서 폭넓게 지원되므로 실무에서 안심하고 사용할 수 있습니다.