CSS - 상태선택자

상태선택자는 입력 양식의 상태를 선택할때 사용한다.

disabled는 input 태그에 값을 입력할 수 없는 상태 , input 태그 하나에만 포커스를 둘 수 있음.

형태 설명
:checked 체크상태의 input 태그선택
:focus 포커스를 맞춘 input 태그 선택
:enabled  사용 가능한 input 태그 선택
:disabled 사용 부가능한 input 태그 선택
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style>
input:enabled{background-color:white;}
/*input 태그가 사용가능할때 background-color 속성에
white 키워드를 적용한다 */
input:disabled{background-color:gray;}
/*input 태그가 사용불가능할때 background-color 속성에
gray 키워드를 적용한다*/
input:focus{background-color:orange;}
</style>
</head>
<body>
<h2>사용가능</h2>
<input>
<h2>사용 불가능</h2>
<input disabled="disabled">
</body>
</html>

 

 

댓글

Designed by JB FACTORY