웹 폼을 만들다 보면 사용자에게는 보여주되 수정은 허용하지 않아야 하는 입력 필드가 필요할 때가 있습니다. 이럴 때 HTML의 readonly 속성을 사용하면 해당 <input> 요소를 읽기 전용으로 만들 수 있는데, CSS에서는 :read-only 선택자를 활용해 이러한 요소만 골라 별도의 스타일을 적용할 수 있습니다.
:read-only 선택자란?
:read-only 선택자는 readonly 속성이 설정된 요소를 대상으로 합니다. 반대로 사용자가 값을 편집할 수 있는 일반적인 입력 요소에는 :read-write 선택자를 사용하면 됩니다. 두 선택자를 조합하면 편집 가능한 필드와 읽기 전용 필드를 시각적으로 명확하게 구분할 수 있어 사용자 경험(UX) 측면에서도 큰 도움이 됩니다.
예제
다음 코드를 실행하면 :read-only 선택자가 실제로 어떻게 동작하는지 확인할 수 있습니다. 아래 예제에서는 'Student' 필드에 readonly 속성이 지정되어 있으므로 파란색 배경과 흰색 글자가 적용됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
input:read-only {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<form>
Subject: <input type = "text" name = "subject" value = "Maths"><br>
Student: <input type = "text" name = "student" readonly value = "Amit"><br>
</form>
</body>
</html>실행 결과
위 코드를 브라우저에서 열어보면 다음과 같은 차이를 확인할 수 있습니다.
- Subject 필드:
readonly속성이 없으므로 기본 스타일이 유지되며, 사용자가 자유롭게 값을 수정할 수 있습니다. - Student 필드:
readonly속성이 있기 때문에:read-only선택자에 의해 파란색 배경과 흰색 텍스트가 적용되고, 값은 화면에 표시되지만 편집할 수 없습니다.
이처럼 :read-only 선택자를 활용하면 자바스크립트 없이 순수 CSS만으로 읽기 전용 필드를 한눈에 구분되도록 디자인할 수 있습니다. 참고로 구형 브라우저 호환성이 필요한 경우 벤더 접두사(-moz-read-only 등)를 함께 사용하는 것이 좋습니다.