:optional 가상 클래스
가상 클래스 optional는
required 속성이 설정되지 않은 입력 필드,
즉 필수가 아닌 선택적인 입력 필드에 적용되는 스타일을
정의합니다.
구문
선택자:optional {
}
예제
선택적인 입력 필드에 회색 배경을 설정해 봅시다:
<form>
<p>
<label>숫자 입력</label>
<input type="number" required>
</p>
<p>
<label>텍스트 입력</label>
<input type="text">
</p>
</form>
input:optional {
background-color: #D8DFE8;
}
:
함께 보기
-
기본값인 요소에 스타일을 정의하는
가상 클래스
:default -
불확정 상태의 토글 요소에 스타일을 정의하는
가상 클래스
:indeterminate -
힌트 텍스트가 표시될 때 요소에 스타일을 정의하는
가상 클래스
:placeholder-shown -
변경할 수 없는 입력 필드에 스타일을 정의하는
가상 클래스
:read-only -
required 속성이 설정된 입력 필드에 스타일을 정의하는
가상 클래스
:required -
포커스된 요소에 스타일을 정의하는
가상 클래스
:focus-within -
입력 필드의 텍스트 커서 색상을 정의하는
속성
caret-color
