CSS(7) form 관련 가상 선택자

:enabled / :disabled

활성화 / 비활성화 상태일 때

<label>
	아이디
	<input type="text" enabled>
</label>

input:enabled {
	border: 1px solid royalblue;
}

 

:read-only / :read-write

사용자가 편집할수 없는 / 있는 상태일 때

 

:checked

input type="checkbox, radio" 유형일때 선택된 상태를 나타냄

<input id="checkbox" type="checkbox">
<label for="checkbox">약관동의</label>

/* input이 체크되면 input 바로 다음에 오는 형제 요소 lable에 줄이 쳐짐 */
input:checked+label{
	text-decoration: line-through;
}

 

:required

필수입력값일 경우

 

::placeholder

입력에 대한 추가 정보가 있을 경우

<p><input type="text" placeholder="이곳은 input입니다"></p>

/* 이곳은 input입니다 의 글자색이 빨간색으로 변경 */
input::placeholder{
	color: red;
}