[CSS] 입력폼에서 readonly와 disabled, 언제 어떻게 쓰고 스타일링할까?

웹 개발을 하다 보면 <input type="text"> 요소에 이미 값이 들어가 있는 상태에서 특정한 스타일을 적용해야 하는 경우가 있습니다. 예를 들어, 사용자가 직접 입력한 값과 미리 설정된 값을 시각적으로 구분해야 하거나, 읽기 전용(readonly) 또는 비활성화(disabled) 상태로 설정해야 할 수도 있죠. 이번 포스팅에서는 readonly 및 disabled 속성의 차이와 CSS 스타일링 방법에 대해서 알아보겠습니다.

 

readonly와 disabled 속성의 차이

 

readonly가 적용되는 태그

readonly는 사용자가 값을 수정할 수 없지만, 해당 요소의 값은 폼에 포함되는 속성입니다. 이 속성은 텍스트 입력 요소에만 사용 가능하며, 사용자가 입력을 변경할 수 없도록 하면서도 해당 값은 폼 제출 시 포함됩니다.

✅ 적용 가능한 태그

• <input type="text">, <input type="password">, <input type="email">, <input type="number"> 등
• <textarea>

❌  적용되지 않는 태그

• <input type="checkbox">, <input type="radio">, <input type="button">, <input type="submit">, <input type="file">
• <select>, <button>
• <fieldset>, <option>, <optgroup> 등

<input type="text" value="홍길동" readonly />
<textarea readonly>이 텍스트는 수정할 수 없습니다.</textarea>

 

disabled가 적용되는 태그

disabled는 해당 요소를 완전히 비활성화하고, 폼 제출 시에도 제외되는 속성입니다. 이 속성은 대부분의 폼 요소에 적용할 수 있으며, 사용자가 값을 입력하거나 클릭할 수 없게 됩니다. 또한, disabled 속성이 적용된 요소는 폼 제출 시 그 값이 포함되지 않습니다.

 

✅ 적용 가능한 태그

• <input> (모든 타입)
• <textarea>
• <select>
• <button>
• <fieldset>
• <option>, <optgroup>

<input type="text" value="홍길동" disabled />
<select disabled>
  <option>선택할 수 없음</option>
</select>
<button disabled>클릭할 수 없음</button>

readonly와 disabled 상태에서 스타일 적용하기

readonly 속성을 활용한 스타일링

input:readonly 속성을 사용하면 값이 폼에 포함되지만 사용자는 편집할 수 없습니다.

input[readonly] {
  background-color: #f8f8f8;
  color: #999;
  border: 1px solid #ddd;
  cursor: default;
}

disabled 속성을 활용한 스타일링

disabled는 폼 제출 시 값이 포함되지 않으며, 클릭이나 포커스도 불가능합니다.

input:disabled {
  background-color: #eee;
  color: #aaa;
  border: 1px solid #ccc;
  cursor: not-allowed;
}

 

 

이렇게 이번 포스팅에서는 readonly 및 disabled 속성의 차이와 CSS 스타일링 방법에 대해서 알아보았습니다.

 

 

 

 

 

 

[Git] PR 커밋 해시를 활용한 브랜치 생성 : 쉽고 간단한 가이드

 

[Safari] 사파리 브라우저로 iPhone 웹 페이지 디버깅하는 방법 (feat. 웹 인스펙터)

 

[firebase] 구글 Firebase로 무료 웹호스팅하는 방법에 대해서 알아보자

 

[HTML] 반응형으로 이미지맵 생성하는 방법

 

Vite에서 모듈들 간단하게 설치해서 사용하기 (feat. sass) - 1편