뇌 채우기 공간

[html][css] 상태 선택자 input:focus / input:enabled/input:disabled css change 본문

WEB/html,CSS

[html][css] 상태 선택자 input:focus / input:enabled/input:disabled css change

자바칩 프라푸치노 2021. 4. 4. 18:15

input타입에서 focus, enabled, disabled때 속성 추가하는 법

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <style>
        input:focus { 
            outline: none !important;
            border-color: orange;
            box-shadow: 0 0 10px #719ECE;
        }
        input:enabled {
            color: pink;
        }
        input:disabled {
            color: violet;
        }
    </style>
</head>
<body>
    상태선택자
    <div>
        <form action="">
            이름 <input type="text"><br>
            아이디 <input type="text"><br>
            <!-- disabled = 변경 할 수 없다는 뜻 -->
            비밀번호 <input type="password" value="1234" disabled="disabled">
        </form>
    </div>
</body>
</html>
 cs

 

<결과>

728x90
저작자표시 비영리 변경금지 (새창열림)

'WEB > html,CSS' 카테고리의 다른 글

[html][css] 선택자를 이용하여 레이아웃 만들어보기  (0) 2021.04.04
[html][css]구조 선택자 nth-child/ first-child/last-child  (0) 2021.04.04
[html][css]반응선택자 hover css change  (0) 2021.04.04
[html][css] 동위선택자  (0) 2021.04.04
[html][css] 자손 및 후손 선택자 / css자손, 후손 선택하는 법  (0) 2021.04.04
'WEB/html,CSS' Related Articles more