본문 바로가기

프로그래밍/HTML5

상태선택자 태그

 

<!DOCTYPE html>
<html>
   <meta charset="utf-8">
   <head>
      <title>상태 선택자</title>
      <style>
         input:enabled {background-color: white;}
         input:disabled {background-color: gray;}
         /* input태그에 초점이 맞추어지면 색상을 오렌지로 변경*/
         input:focus {background: orange;}
      </style>
   </head>
   <body>
      <h2>사용 가능</h2>
      <input />
      <h2>사용 불가능</h2>
      <input disabled="disabled"/><br/>
   </body>
</html>

 

사용가능 옆에 input태그

사용불가능 옆에 input태그인데 disabled로 사용불가


enabled는 평상시 색상으로 배경색상은 하얀색으로 되어있다.

focus는 마우스로 상자를 클릭했을때 상태로 배경색상이 주황색으로 되어있다.

disabled는 사용불가능으로 클릭할수없다 배경색상은 회색으로 되어있다.

'프로그래밍 > HTML5' 카테고리의 다른 글

구조선택자 태그  (0) 2017.09.20
상태선택자 태그2  (0) 2017.09.20
반응선택자태그  (0) 2017.09.20
자손 선택자  (0) 2017.09.20
후손 선택자  (0) 2017.09.20