4.1 의사 클래스 :checked
CSS의 폼 의사 클래스는 폼 요소의 상태에 따라 스타일을 설정할 수 있는 기능을 제공합니다. 이 의사 클래스를 사용하면 사용자 인터페이스와 경험을 향상시키는 인터랙티브하고 접근 가능한 폼을 만들 수 있습니다. 이제 :checked, :disabled, :enabled, :invalid 의사 클래스를 자세히 살펴보겠습니다.
:checked 의사 클래스는 "선택된" 상태의 폼 요소에 적용됩니다. 이것은 체크박스(<input type="checkbox">), 라디오 버튼(<input type="radio">), 옵션(<option>)에 해당합니다.
구문:
셀렉터:checked {
속성: 값;
}
사용 예제
이 예제에서는 선택된 체크박스, 라디오 버튼 및 옵션이 "선택됨" 상태일 때 적절한 배경색을 받습니다:
/* 선택된 체크박스 스타일링 */
input[type="checkbox"]:checked {
background-color: #3498db;
}
/* 선택된 라디오 버튼 스타일링 */
input[type="radio"]:checked {
background-color: #2ecc71;
}
/* 선택된 옵션 스타일링 */
option:checked {
background-color: #e74c3c;
}
4.2 의사 클래스 :disabled
:disabled 의사 클래스는 비활성화 상태의 폼 요소에 적용됩니다. 이는 일시적으로 접근할 수 없는 요소를 스타일링하는 데 유용합니다.
구문:
셀렉터:disabled {
속성: 값;
}
사용 예제
이 예제에서는 비활성화된 입력 필드와 버튼이 적절한 배경색, 테두리 및 텍스트 색상을 받으며, 커서를 "금지됨"으로 변경합니다:
/* 비활성화된 입력 필드 스타일링 */
input:disabled {
background-color: #f0f0f0;
border-color: #ccc;
color: #888;
}
/* 비활성화된 버튼 스타일링 */
button:disabled {
background-color: #d0d0d0;
color: #777;
cursor: not-allowed;
}
4.3 의사 클래스 :enabled
:enabled 의사 클래스는 활성화된 폼 요소에 적용됩니다. 이는 접근 가능한 요소를 스타일링할 수 있게 해줍니다.
구문:
셀렉터:enabled {
속성: 값;
}
사용 예제
이 예제에서는 활성화된 입력 필드와 버튼이 적절한 배경색, 테두리 및 텍스트 색상을 받으며 커서를 "포인터"로 변경합니다:
/* 활성화된 입력 필드 스타일링 */
input:enabled {
background-color: #fff;
border-color: #3498db;
}
/* 활성화된 버튼 스타일링 */
button:enabled {
background-color: #2ecc71;
color: white;
cursor: pointer;
}
4.4 의사 클래스 :invalid
:invalid 의사 클래스는 유효성 검사를 통과하지 못한 폼 요소에 적용됩니다. 이는 잘못된 데이터를 포함하는 입력 필드를 스타일링할 수 있게 해줍니다.
구문:
셀렉터:invalid {
속성: 값;
}
사용 예제
이 예제에서는 잘못된 입력 필드와 텍스트 필드가 유효성 검사를 통과하지 못한 것을 시각적으로 보여주기 위해 적절한 테두리와 배경색을 받습니다:
/* 잘못된 입력 필드 스타일링 */
input:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
/* 잘못된 텍스트 필드 스타일링 */
textarea:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
4.5 전체 구현 예제
/* 선택된 체크박스 스타일링 */
input[type="checkbox"]:checked {
background-color: #3498db;
}
/* 선택된 라디오 버튼 스타일링 */
input[type="radio"]:checked {
background-color: #2ecc71;
}
/* 비활성화된 입력 필드 스타일링 */
input:disabled {
background-color: #f0f0f0;
border-color: #ccc;
color: #888;
}
/* 비활성화된 버튼 스타일링 */
button:disabled {
background-color: #d0d0d0;
color: #777;
cursor: not-allowed;
}
/* 활성화된 입력 필드 스타일링 */
input:enabled {
background-color: #fff;
border-color: #3498db;
}
/* 활성화된 버튼 스타일링 */
button:enabled {
background-color: #2ecc71;
color: white;
cursor: pointer;
}
/* 잘못된 입력 필드 스타일링 */
input:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
/* 잘못된 텍스트 필드 스타일링 */
textarea:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>폼 의사 클래스 예시</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form>
<label>
<input type="checkbox" name="option1"> Option 1
</label>
<br>
<label>
<input type="radio" name="choice" value="1"> Choice 1
</label>
<label>
<input type="radio" name="choice" value="2"> Choice 2
</label>
<br>
<input type="text" placeholder="Enter your name" required>
<br>
<input type="email" placeholder="Enter your email" required>
<br>
<button type="submit">Submit</button>
<button type="button" disabled>Disabled Button</button>
</form>
</body>
</html>
GO TO FULL VERSION