CSS :read-only 선택자란?
CSS의 :read-only 선택자는 읽기 전용(read-only) 상태인 요소를 선택하는 의사 클래스(pseudo-class)입니다. 폼 입력 요소에 readonly 속성이 설정되어 있으면 해당 요소는 읽기 전용으로 간주되며, 이 선택자를 통해 별도의 스타일을 적용할 수 있습니다.
예를 들어, 사용자가 값을 수정할 수 없는 입력 필드에 배경색이나 글자색을 다르게 지정하면, 방문자가 어떤 필드가 편집 가능하고 어떤 필드가 편집 불가능한지 한눈에 파악할 수 있어 사용자 경험(UX) 측면에서도 유용합니다.
사용 예제
아래 코드를 실행하여 :read-only 선택자가 실제로 어떻게 동작하는지 확인해 보세요. readonly 속성이 있는 'Student' 입력 필드만 파란색 배경과 흰색 글자로 표시됩니다.
<!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속성이 없으므로 일반적인 편집 가능한 상태로 유지되며,:read-only스타일이 적용되지 않습니다. - Student 필드:
readonly속성이 설정되어 있어 읽기 전용으로 판단되며, 파란색 배경과 흰색 글자가 적용됩니다.
참고 사항
:read-only와 반대 개념인 :read-write 선택자도 있습니다. 이 선택자는 사용자가 편집 가능한 요소에 스타일을 적용할 때 사용합니다. 두 선택자를 함께 활용하면 편집 가능 여부에 따라 입력 필드를 시각적으로 명확하게 구분할 수 있습니다.
또한 대부분의 최신 브라우저(Chrome, Firefox, Safari, Edge)에서 :read-only 선택자를 문제없이 지원하므로, 호환성 걱정 없이 프로젝트에 적용할 수 있습니다.